结构伪类选择器是针对 HTML 层级结构的伪类选择器。
-
首先我们先总结一下有哪些结构伪类选择器
| 选择器 | 说明 |
|---|---|
E:first-child |
选择父元素的第一个子元素 |
E:last-child |
选择父元素的最后一个子元素 |
E:nth-child(n) |
选择父元素下的第 n 个元素或奇偶元素，n 的值为“数字 | odd | even” |
E:only-child |
选择父元素中唯一的子元素（该父元素只有一个子元素） |
E:first-of-type |
选择同类型的第一个同级兄弟元素 |
E:last-of-type |
选择同类型的最后一个同级兄弟元素 |
E:nth-of-type(n) |
选择同类型的第 n 个同级兄弟元素，n 的值为“数字 | odd | even” |
E:only-of-type |
选择父元素中特定类型的唯一子元素（该父元素有多个子元素） |
:root |
选择文档的根元素。在 HTML 中根元素永远是 HTML |
E:not() |
选择某个元素之外的所有元素 |
E:target |
选取页面中某个 target 元素 |
-
举例详解
first-child ：父元素的第一个子元素
<style>
div:first-child {
color: aqua;
}
</style>
<body>
<p>ppp</p>
<div>
<div>
456
</div>
<div>789</div>
</div>
</body>
first-child.png
解析：上面例子中为什么 456 颜色变化呢？首先回顾代码：
first-child代码解析.png
我们的样式是这样的 div:first-child，首先这个标签需要是 div 标签 ,所以 p标签是不符合要求的。 其次这个标签需要是父元素中的第一个元素，div1 就不符合要求，它在父元素中不是第一个（父元素是body,p 才是第一个），显然 div3 也不符合（它的父元素是 div1，上面还有一个元素 div2）。div2 在父元素 div1 中是第一个元素，所以最后符合要求只有 div2 ，也就是 456 这个文本颜色会发生变化。
last-child:父元素的最后一个子元素
<style>
div:last-child {
color: gold;
}
</style>
<body>
<p>ppp</p>
<div>
<div>
456
</div>
<div>789</div>
</div>
</body>
last-child.png
nth:child(n) 父元素下的第 n 个元素或奇偶元素
<style>
p:nth-child(1) {
color: red;
}
p:nth-child(2) {
color: green;
}
p:nth-child(3) {
color: blue;
}
</style>
<body>
<p>ppp</p>
<div>
<div>
456
</div>
<div>789</div>
</div>
<p>000</p>
</body>
nth-child.png
only-child 父元素中唯一的子元素（该父元素只有一个子元素）
<style>
div:only-child {
color: chartreuse;
}
</style>
<body>
<p>ppp</p>
<div>
<div>
456
</div>
<div>789</div>
</div>
<p>000</p>
<div>
<div>唯一的</div>
</div>
</body>
only-child.png
first-of-type 选择同类型的第一个同级兄弟元素
<style>
div:first-of-type {
color: cornflowerblue;
}
</style>
<body>
<p>ppp</p>
<div>
<div>
456
</div>
<div>789</div>
</div>
<p>000</p>
<div>
<div>唯一的</div>
<div>是吗</div>
</div>
</body>
结果：
first-of-type.png
解析：
first-of-type代码解析.png
上图中，我们很清楚的看到了那些属于同级，
first-of-type 是要找到同级的第一个，所以 div1、div2、div5 是符合要求的，所以“456” “ 789”’ “唯一的”会发生样式变化。
last-of-type 同类型的最后一个同级兄弟元素
<style>
div:last-of-type {
color: royalblue;
}
</style>
<body>
<p>ppp</p>
<div>
<div>
456
</div>
<div>789</div>
</div>
<p>000</p>
<div>
<div>唯一的</div>
<div>是吗</div>
</div>
</body>
last-of-type.png
nth-of-type(n) 同类型的第 n 个同级兄弟元素
<style>
div:nth-of-type(2) {
color: turquoise;
}
</style>
<body>
<p>ppp</p>
<div>
<div>
456
</div>
<div>789</div>
</div>
<p>000</p>
<div>
<div>唯一的</div>
<div>是吗</div>
</div>
</body>
nth-of-type.png
only-of-type 选择父元素中特定类型的唯一子元素（该父元素有多个子元素）
<style>
div:only-of-type,
p:only-of-type {
color: turquoise;
}
</style>
<body>
<p>ppp</p>
<div>
<div>
456
</div>
<div>789</div>
</div>
<div>
<div>唯一的</div>
<div>是吗</div>
</div>
</body>
结果：
only-of-type.png
解析：如上代码中，我们给
p 标签和 div 标签都设置了 only-of-type，但是只有 p 标签的起作用了。为什么？因为上述代码中存在多个 div。所以这个选择选择器一定要注意唯一性。
