[快速入门前端 14] CSS 选择器 (4) Pseudo-Classes 伪类 - 结构伪类

结构伪类

结构伪类是指针对 HTML 结构来选择元素进行样式设定，从而减少对 Class 的依赖，尤其是在表格、表单等排列顺序会变动的元素中。例如当我们想利用 Class 将表单前三名的项目设为红色时，需要在每次排序变动后重新将 Class 写到前三名的元素中，而如果用结构伪类的话，就直接将表单中前三个子元素设为红色就好了。

常见结构伪类

:first-child

:first-child 指的是「符合条件的第一个子元素」，用法为 元素:first-child {}，例如 p:first-child{} 指的是身为第一个子元素的 p 标籤。

语法：

p:first-child { /* 选择为第一个子元素的 p 标籤元素 */    属性名: 属性值;}div>p:first-child { /* 选择 div 的第一个直接子元素，且第一个子元素必须为 p */    属性名: 属性值;}div p:first-child { /* 选择 div 的后代，只要该元素为他的父亲的第一个子元素，且为 p */    属性名: 属性值;}

範例 (div>p)：

div>p:first-child { /* 选择 div 的第一个直接子元素，且第一个子元素必须为 p */    color: red;}

<h3>範例一</h3><div>    <p>我是 p 我是 div 的第一个子元素</p> <!-- div 的第一个子元素是 p，变红色-->    <p>我是 p 我是 div 的第二个子元素</p> <!-- 第二个子元素不受影响 -->    <p>我是 p 我是 div 的第三个子元素</p></div><h3>範例二</h3><div>    <span>我是 span 我是 div 的第一个子元素</span> <!-- 虽然是 div 的第一个子元素，但不是 p -->    <p>我是 p 我是 div 的第二个子元素</p></div><h3>範例三</h3><div>    <p>我是 p 我是 div 的第一个子元素</p> <!-- div 的第一个子元素是 p，变红色-->    <p>我是 p 我是 div 的第二个子元素</p>    <div>        <p>我是 p 我是 div 里面的 div 的第一个子元素</p> <!-- 是第二层 div 的第一个子元素且为 p，变红色-->        <p>我是 p 我是 div 里面的 div 的第二个子元素</p>    </div></div>

範例 (div p)：

div p:first-child { /* 选择 div 后代元素，该元素为 p 且为第一个子元素 */    color: red;}

<p>我也是第一个子元素 p 但我不是 div 的后代</p><div>    <p>我是 p 我是 div 的第一个子元素</p>    <form>        <p>我是 ｐ 我是 div 内的 form 的第一个子元素</p>        <p>我是 ｐ 我是 div 内的 form 的第二个子元素</p>    </form></div>

:first-of-type

:first-of-type 指的是「符合条件的第一个同标籤子元素」，以 p:first-of-type 为例，只要该元素为第一个 p 子元素，不管前面还有多少个「哥哥元素」，也就是排在该元素前的其他标籤，只要元素是第一个 p 元素就符合条件。

语法：

p:first-of-type { /* 选择为第一个同类子元素的 p 标籤元素 */    属性名: 属性值;}div>p:first-of-type { /* 选择 div 的第一个同类子元素，且第一个子元素必须为 p */    属性名: 属性值;}div p:first-of-type { /* 选择 div 的后代，只要该元素为他的父亲的第一个同类子元素，且为 p */    属性名: 属性值;}

範例：

div p:first-of-type { /* 选择 div 后代元素，该元素为 p 且为第一个子元素 */    color: red;}

<p>我也是第一个子元素 p 但我不是 div 的后代</p><div>    <h>我是 div 的第一个子元素 h</h>    <p>我是 div 的第二个子元素 p</p>    <form>        <span>我是 form 的第一个子元素 span</span>        <p>我是 form 的第二个子元素 p</p>    </form></div>

:nth-child(n)

:nth-child(n) 指的是选择子元素的第 n 个节点，其中 n 中可以填数字、odd(基数)、even(偶数)、及公式，其中公式的部分必须为 an+b 的形式。

语法：

p:nth-child(2) { /* 选择为第2个子元素的 p 标籤 */    属性名: 属性值;}p:nth-child(odd) { /* 选择所有第奇数个子元素 p */    属性名: 属性值;}p:nth-child(3n+1) { /* 选择第 1、4、7...个子元素 p */    属性名: 属性值;}

範例：

div p:nth-child(2){    color: red;}div a:nth-child(even){    color: red;}div label:nth-child(3n+1){    color: red;}

<div>    <p>第一个子元素 ｐ</p>     <p>第二个子元素 ｐ</p>     <p>第三个子元素 ｐ</p></div><div>    <a>第一个子元素 a</a>    <a>第二个子元素 a</a>    <a>第三个子元素 a</a>    <a>第四个子元素 a</a></div><div>    <label>第一个子元素 label</label>    <label>第二个子元素 label</label>    <label>第三个子元素 label</label>    <label>第四个子元素 label</label></div>

结构伪类总结

选择器说明补充:root代表根元素，也就是  标籤。几乎不会用到:first-child选择第一个子元素 (不论是否为同类标籤):last-child选择最后一个子元素 (不论是否为同类标籤)与 first-child 相反，从后数到前:first-of-type选择第一个同类子元素 (同标籤的第一个子元素):last-of-type选择最后一个同类子元素 (同标籤的最后一个子元素)与 first-of-type 相反，从后数到前:nth-child(n)选择第 n 个子元素n 中可以写数字、基偶数关键字、an+b 公式:nth-last-child(n)倒数第 n 个子元素与 nth-child 相反，从后数到前:nth-of-type(n)选择第 n 个同类子元素:nth-last-of-type(n)倒数第 n 个类子元素与 nth-of-type 相反，从后数到前:only-child没有任何兄弟元素的子元素独生子的概念

---

因篇幅关係没有一一说明所有结构伪类，若想了解更多可参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child

---

上一篇：[快速入门前端 13] CSS 选择器 (3) Pseudo-Classes 伪类 - 动态伪类
下一篇：[快速入门前端 15] CSS 选择器 (4) Pseudo-Classes 伪类 - UI状态伪类、否定伪类、目标伪类、语言伪类
系列文章列表：[快速入门前端] 系列文章索引列表