一、 :x-child选择器

重点在于 child 子元素，按照子元素顺序选择。

图片预览

1. :first-child

匹配同时满足以下两个条件的元素标签：

① 是div元素的第一个子元素；

② 该子元素是 p 元素。

div p:first-child
{ 
    background-color:yellow;
}

2. :last-child

匹配同时满足以下两个条件的元素标签：

① 是div元素的最后一个子元素；

② 该子元素是 p 元素。

div p:last-child
{ 
    background-color:yellow;
}

3. :only-child

匹配同时满足以下两个条件的元素标签：

① h2元素只有一个子元素；

② 该子元素是 span 元素。

h2 span:only-child {
  background-color: gold;
}

4. :nth-child(n)

匹配同时满足以下两个条件的元素标签：

① 元素标签的class类名为box的第三个子元素；

② 该子元素是 li 元素。

.box li:nth-child(3) {
  background-color: red;
}

5. 实例

可自行创建HTML文件，对应学习！

  
  
  
  


  

    第一个 Ul 列表 
  
  

    
0
 
    
1
 
    
2
    
3-1
    
3-2
    
4
    
5
    
6
 
  
  

    第二个 Ul 列表 
    
p元素
  

二、:x-of-type选择器

重点在于 type 类型，只在类型一致的子元素中找。

1. :first-of-type

匹配 ul元素的子元素中的第一个 li元素

ul li:first-of-type {
  background-color: rosybrown;
}

2. :last-of-type

匹配 ul元素的子元素中的最后一个 li元素

ul li:last-of-type {
  background-color: chartreuse;
}

3. :only-of-type

匹配 div元素的唯一子元素是 p元素

div p:only-of-type {
  font-size: 24px;
  color: darkblue;
}

4. :nth-of-type(n)

匹配 div元素的第二个p子元素

div p:nth-of-type(2) {
  font-size: 24px;
  color: darkblue;
}

5. 实例

  
  
  
  


  

    
0
    
1
    
2
    
3-1
    
3-2
    
4
    
5
    
6
  
  

  

    
a
    
11
    
b
    
c
    
dddd
    
f
    
22
    
g