结构伪类选择器
结构伪类选择器
在CSS中，结构伪选择器（Structural Pseudo-classes）是指那些能够根据元素在文档树中的结构位置来进行选择的伪类。它们不依赖于元素的具体属性值，而是基于元素的位置、顺序等关系进行选择。常见的结构伪选择器有：
1.
:first-child选择某个元素是其父元素的第一个子元素时应用样式。
示例：
html
<div> <p>第一段</p> <p>第二段</p> </div>css
p:first-child { color: red; }效果：只有第一段文本（
第一段）会变成红色，因为它是父元素中的第一个子元素。
2.
:last-child选择某个元素是其父元素的最后一个子元素时应用样式。
示例：
html
<div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div>css
p:last-child { color: blue; }效果：只有最后一段文本（
第三段）会变成蓝色，因为它是父元素中的最后一个子元素。
3.
:nth-child()选择某个元素是其父元素中符合特定模式的子元素。
nth-child()接受一个公式，如n、odd、even或具体的数字。示例：
html
<ul> <li>第1项</li> <li>第2项</li> <li>第3项</li> <li>第4项</li> </ul>css
li:nth-child(odd) { background-color: lightgray; }效果：奇数项（第1项、第三项）将应用
background-color: lightgray。使用数字：
css
li:nth-child(2) { color: green; }效果：第二个
li元素（第2项）会变成绿色。使用公式：
css
li:nth-child(3n) { color: red; }效果：每隔三个元素（第3、6、9项等）会应用
color: red。
4.
:nth-of-type()选择某个元素是其父元素中符合特定模式的某种类型的子元素。与
nth-child()不同，nth-of-type()只对特定类型的元素进行选择。示例：
htmlC
<div> <p>段落1</p> <p>段落2</p> <div>其他div</div> <p>段落3</p> </div>css
p:nth-of-type(2) { color: orange; }效果：只有第二个
p元素（段落2）会变成橙色。
5.
:first-of-type选择某个元素是其父元素中的第一个特定类型的子元素。
示例：
html
<div> <p>段落1</p> <div>其他div</div> <p>段落2</p> </div>css
p:first-of-type { color: purple; }效果：只有第一个
p元素（段落1）会变成紫色。
6.
:last-of-type选择某个元素是其父元素中的最后一个特定类型的子元素。
示例：
html
<div> <p>段落1</p> <div>其他div</div> <p>段落2</p> </div>css
p:last-of-type { color: yellow; }效果：只有最后一个
p元素（段落2）会变成黄色。
7.
:only-child选择某个元素是其父元素的唯一子元素时应用样式。
示例：
htmlC
<div> <p>这是一段唯一的文本</p> </div>css
p:only-child { color: pink; }效果：该
p元素会变成粉色，因为它是唯一的子元素。
8.
:only-of-type选择某个元素是其父元素中的唯一一个指定类型的子元素。
示例：
html
<div> <p>段落1</p> <div>其他内容</div> <p>段落2</p> </div>css
div:only-of-type { background-color: lightblue; }效果：如果
div是父元素中的唯一一个div元素，背景色将变为lightblue。在这个例子中，只有一个div被选中并应用样式。
9.
:empty选择没有子元素（包括文本节点、注释等）的元素。
示例：
htmlC
<div> <p>段落1</p> <p></p> <p>段落2</p> </div>css
p:empty { color: gray; }效果：第二个
p元素（为空的段落）将变成灰色。
10.
:not()
not()伪类允许选择除指定元素外的其他元素。它不是严格意义上的结构伪选择器，但可以与其他结构伪类结合使用来创建复杂的选择器。示例：
html
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>css
li:not(:nth-child(2)) { color: red; }效果：所有
li元素（除了第二个元素）会变成红色。
这些结构伪选择器使得你能够根据元素的位置、类型和层次关系灵活地应用样式，从而避免了冗余的类选择器或更复杂的JavaScript操作，增强了CSS的表现力和可维护性。
原文地址：https://blog.csdn.net/laocooon/article/details/144353561
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！