<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="..\css\demo01.css"> -->
<style>
/* 子代选择器 */
div.list>ul{
/* 这里的div可以不写,这里的>表示第一级子标签 */
border: 1px solid red;
}
/* 后代选择器 */
.list li{
border: 1PX solid rgb(49, 24, 212);
}
/* 分组选择器(逗号选择器) */
.one,.two,#first{
color: blueviolet;
width: 200px;
height: 200px;
background-color: pink
}
</style>
</head>
<body>
<!-- 包含选择器
子代选择器:获得莫格标签的第一级子标签
后代选择器:获取某个标签的所有子标签
分组选择器:逗号选择器,可以同时设置多个标签,使用逗号分隔 -->
<div class="one">这是第一个div</div>
<div class="two">这是第二个div</div>
<p id="first">这是一个段落
</p>
<div class="list">
<ul>
<!-- ul是第一级子标签 ,可以理解为div的儿子,而下面的li这是ul的儿子-->
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
</ul>
</div>
</body>
</html>
属性选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择某个标签存在的某个属性值 */
div[title]{
/* 这里表示只想写title这个属性的div */
border: 1px solid red;
}
/* 确切的等于某个值 */
input[type]{
background: blue;
}
/* 属性值一xxx为开头 */
input[type ^="e"]{
/* 这里表示以type命名以e开头的变为绿色 */
background: green;
}
/* 属性值一xxx结尾 */
input[type $="rl"]{
/* 这里表示以type命名以rl结尾的变为黑色 */
background: black;
}
/* 以属性包含某个值是以*表示 */
/* + 表示下一个标签 */
.msg+p{
/* 表示msg这个标签的下一个标签 */
border: 1px solid brown;
}
/* 确切的某个值 */
[class="container"]{
background: pink;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
属性选择器
<div class="container">
<!-- 这是一个div的容器 -->
这是一个div
</div>
<div title="这是一个标题">第二个</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="邮箱">
<input type="url" name="" id="" value="路径">
<hr>
<div class="msg">我喜欢ikun</div>
<p id="msg1">这是一个段落</p>
</body>
</html>
伪类选择器
伪类选择器:同一个标签,根据不同的状态,有不同的样式,叫伪类
:link------链接点击之前
:visited-----链接点击之后
:hover-----悬停
:active---激活鼠标点击的时候不松手的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<style>
/* 点击之前 */
a:link{
color: red ;
}
/* 点击之后 */
a:visited{
color: blue;
}
/* 悬停的颜色 */
a:hover{
color: yellow;
}
/* 不松手 */
a:active{
color: pink;
}
</style>
</head>
<body>
<!-- 伪类选择器:同一个标签,根据不同的状态,有不同的样式,叫伪类
:link------链接点击之前
:visited-----链接点击之后
:hover-----悬停
:active---激活鼠标点击的时候不松手的状态
伪元素选择器 -->
<a href="..\html\deom02.html">点击我</a>
</body>
</html>
伪元素选择器
<!-- 伪元素选择器
::before---之前
::after----之后
注意:在使用伪元素前一定要加上content
-->
<!-- 如果没有content的话就不会有元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::before{
content: "张三";
color: brown;
}
p::after{
content: "李四";
color: green;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
这是有content的效果