一、本课目标
- 层次选择器
- 结构伪类选择器
- 属性选择器
二、层次选择器
层次选择器
2.1后代选择器
语法：body p{background:red}
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body p{
background: red;
}
</style>
</head>
<body>
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li> <li>
<p>5</p>
</li> <li>
<p>6</p>
</li>
</ul>
</body>
</html>
此时上面的这段代码的结构如下：
image.png
最终在浏览器中的结果如下：
image.png
在结果中，可以看到：所有的body下面的直接的、间接的p标签都变成了红色的，那就证明这个后代选择器选择的是所有的p标签，包括子，包括孙。
注：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他符号插入。同时这个地方跟span标签的选择有相同之处，但要注意后代选择器的第二个选择器不能瞎定义，必须是这个软件里面有的标签。
推广代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Review2</title>
<style>
body p span{
background: red;
}
</style>
</head>
<body>
<p class="active">
<span>1</span>
</p>
<p><span>23</span>2</p>
<p>3</p>
<ul>
<p><span>4</span></p>
<p>5</p>
</ul>
<span>6</span>
</body>
</html>
示例结果：
image.png
分析：这个选择器的意思是body下面的所有直接间接p标签下面的span标签，而6的那一行，因为不在p标签里面，所以不会变色。（
body p.active span，这个的意思是body下面的所有直接间接的类名是active的p标签，如果改变为这个的话，1和4会变红，23则不会变红了。）
2.2子选择器
示例代码一
语法：body>p{background:pink;}
实例代码还是如上，但是有一个地方改变：
<style>
body>p{
background: red;
}
</style>
此时的运行结果如下：
image.png
分析：此时可以看到在最终的结果中只有直接的p标签的颜色发生了改变。
实例代码二
对子选择器做一下推广：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Review2</title>
<style>
body>p span{
background: red;
}
</style>
</head>
<body>
<p class="active">
<span>1</span>
</p>
<p><span>23</span>2</p>
<p>3</p>
<ul>
<p class="active"><span>4</span></p>
<p>5</p>
</ul>
<span>6</span>
</body>
</html>
结果如下：
image.png
分析：这个选择器的body下面的直接p标签下面的span标签才会变色，间接的p标签或者没在p标签下面的span标签都不行。（
body>p.active span的意思是body下面的直接实现了avtive的p标签下面的span标签）。
注：包不包活间接的标签就是后代选择器和子选择器的区别。
2.3相邻兄弟选择器
语法：active+p{background:green;}
示例代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.active+p{
background: green;
}
</style>
</head>
<body>
<p>1</p>
<p class="active">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li> <li>
<p>5</p>
</li> <li>
<p>6</p>
</li>
</ul>
</body>
</html>
最终的结果如下：
image.png
分析：因为设置的是body下面的p标签，而在程序结果中，ul不算是p的兄弟元素，另外两个p才是这个p的兄弟元素，但是也不是所有的p兄弟元素都会被选中，只有这个p的下一个p才会被选中。同时当我把class属性设置到第三个p标签上的时候，结果如下：
image.png
此时并没有任何的p标签会被选中并改变颜色。
2.4通用兄弟选择器
语法：.active~p{background:yellow}
实例代码的三种情况如下：
第一种情况：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Review2</title>
<style>
.active~p{
background: red;
}
</style>
</head>
<body>
<p>0</p>
<p class="active"><span>1</span></p>
<p><span>2</span>3</p>
<p>4</p>
<ul>
<p>5</p>
<p class="active"><span>6</span></p>
<p>7</p>
<p>8</p>
</ul>
<span>9</span>
</body>
</html>
此时的运行结果：
image.png
第二种情况：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.active~p{
background: green;
}
</style>
</head>
<body>
<p>1</p>
<p class="active">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li> <li>
<p>5</p>
</li> <li>
<p>6</p>
</li>
</ul>
</body>
</html>
此时运行结果如下：
image.png
第三中情况：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.active~p{
background: green;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p class="active">3</p>
<ul>
<li>
<p>4</p>
</li> <li>
<p>5</p>
</li> <li>
<p>6</p>
</li>
</ul>
</body>
</html>
运行结果如下：
image.png
结果分析：这个选择器跟上一个选择器的区别在于，这个选择器是目标标签后面的所有标签，而上一个标签只是目标标签后面的下一个标签。当目标标签后面没有标签的时候，则不会有任何的标签会被选中，包括其前面的标签。
三、结构伪类选择器
结构伪类选择器的内容：
image.png
分析：这个表的主要问题在第一个到底是个什么意思？其实，第一个选择器是说所有的父元素下面的第一个E元素，只要是某个（不确定）父元素下面的第一个元素并且这个元素是E，那这个元素就会被选中。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p:first-child{
background: red;
}
ul li:nth-child(2){
background: green;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>
<p>p</p>
<div>
<p>p</p>
</div>
<p>
<p>p</p>
</p>
</div>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
运行结果：
image.png
但是这个地方的疑问在于最后一个p标签为什么没有被选中？理论上应该被选中的。
示例：
image.png
上面代码的结构如下：
image.png
前三个示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p:first-child{
background: red;
}
ul li:nth-child(2){
background: green;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
运行结果如下：
image.png
后三个示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p:first-child{
background: red;
}
p:first-of-type{
background: blue;
}
</style>
</head>
<body>
<h2>mmp</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
结果：
image.png
此时可以看出，是蓝色。
当我把style里面第二个p注释掉了以后：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p:first-child{
background: red;
}
/* p:first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<h2>mmp</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
结果如下：
image.png
分析：可以发现颜色并没有发生改变。这里就可以看出来两者的区别：
- first-child：父级里面第一个子元素的p元素。这个标签的位置和标签类型是定死的。首先在这个位置上，其次还要是我这个类型的标签才能生效。
- first-of-type：父级里面第一个类型是p的元素。这个标签只有类型是定死的，然后我就去找相对应的位置就行了。
因为在上面这段代码中，p的父元素是body，body的第一个子元素是h2，h2里面并没有p元素，所以first-child失效了。
同时，像下面这样：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p:first-child{
background: red;
}
/* p:first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<h2>mmp
<h3>df</h3>
<p>s</p>
</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
输出结果：
image.png
也是失效的，只有当在h2元素中p元素作为第一个子元素出现的时候，才会生效。
两者的区别：
image.png
四、属性选择器
image.png
4.1E[attr]属性选择器
语法：a[id]{background:yellow;}
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a[id]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="" id="first">1</a>
</p>
</body>
</html>
结果：
image.png
4.2E[attr=first]属性选择器
语法：a[id=first]{background:yellow;}
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a[id=first]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="" id="first">1</a>
<a href="" class="" id="second">2</a>
</p>
</body>
</html>
结果：
image.png
4.3E[atr^=val]属性选择器
语法：a[id^=http]{background:yellow;}
属性代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a[id^=fir]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="" id="first:1">1</a>
<a href="" class="" id="first:2">2</a>
<a href="" class="" id="second">3</a>
</p>
</body>
</html>
运行结果：
image.png
4.3E[atr$=val]属性选择器
语法：a[id$=http]{background:yellow;}
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a[id$=t]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="" id="first:1">1</a>
<a href="" class="" id="first:2t">2</a>
<a href="" class="" id="secondt">3</a>
</p>
</body>
</html>
运行结果：
image.png
4.4E[atr*=val]属性选择器
语法：a[id*=http]{background:yellow;}
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a[id*=con]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="" id="first:1">1</a>
<a href="" class="" id="first:2t">2</a>
<a href="" class="" id="secondt">3</a>
</p>
</body>
</html>
运行结果：
image.png
五、总结
image.png
