本文共 981 字，大约阅读时间需要 3 分钟。

CSS结构伪类选择器详解

CSS中的结构伪类选择器是CSS样式表中的一种强大工具，用于通过元素的结构关系选出特定的DOM元素。这些伪类允许我们在没有使用JavaScript的情况下，基于HTML结构进行元素的筛选和操作。

1. 列表的第一个和最后一个元素选择

想要只选择列表的第一个或最后一个元素，可以使用以下伪类选择器：

ul li:first-child {
  background: black;
}
ul li:last-child {
  background: red;
}

这种方法允许我们针对<li>元素的位置进行单独处理，无论是Winagu或Macros，效果都是一致的。

2. 定位父级元素的特定子节点

要选择父级元素的特定子节点，可以使用CSS的:结构伪类。以下是常用的情况：

p:nth-child(1) {
  background: aqua;
}

这个例子选择了在父级元素<p>中存在的第一个<p>元素，适用于需要定位父级元素的特定子节点的情况。

另一个常用的伪类是nth-of-type，用来定位父级元素的特定子节点类型：

p:nth-of-type(2) {
  background: yellow;
}

这个选择器能选择<p>元素中第二个出现的<p>元素，适用于需要对多个兄弟元素中的特定一个进行操作的情况。

3. 完整案例

以下是一个完整的案例，展示了如何在不同层级使用结构伪类选择器：

  
   
  
  
  
   
    
    
p1
    
    
p2
    
    
p3
    
    
      
     
        
      
p4
        
      
p5
        
      
p6
      
     
    
    
  
   

在这个案例中，我们可以看到以下效果：

• ul li:first-child 会将列表项的第一个元素背景设置为黑色
• ul li:last-child 会将列表项的最后一个元素背景设置为红色
• p:nth-child(1) 会将父级<p>中第一个子节点的背景设置为水蓝色
• p:nth-of-type(2) 会将父级<p>中第二个子节点的背景设置为黄色

以上伪类选择器可以帮助开发者更加高效地定位和操作HTML元素，提升开发效率和用户体验。