CSS3--结构性伪类选择器

积硅步而至千里

介绍一下常用的css3结构伪类选择器，nth-child、nth-last-child 、 nth-of-type、nth-last-of-type、 first-child 、last-child 、first-of-type 、last-of-type、only-child以及only-of-type。结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。

一、E:nth-child 和 E:nth-last-child

1.E:nth-child(n)

E:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(2,4,6)，也可以是表达式(n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。比如：

      p:nth-child(n){border:1px solid #ccc}  表示E父元素中的第n个字节点
      p:nth-child(odd){border:1px solid #ccc}/*匹配奇数行*/
      p:nth-child(even){border:1px solid #ccc}/*匹配偶数行*/
      p:nth-child(2n){border:1px solid #ccc}/*其中n是从0开始计算*/

当“E:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

代码展示：

HTNL：
<div class="dome">
   <div>div 1</div>
   <div>div 2</div>
   <div>div 3</div>
   <div>div 4</div>
   <div>div 5</div>
   <div>div 6</div>
   <div>div 7</div>
   <div>div 8</div>
</div>

CSS：

.dome div{
  border:1px solid orange;
  font-weight: bold;
}

.dome div:nth-child(2n){
  background: grey;
}

效果：

E:nth-child(n) 这个选择器只在父元素里面只用一种子元素好用，如果出现两种子元素，就不好用了

代码展示：

HTNL：
<div class="dome">
   <div>div 1</div>
   <h2>我是h2</h2>
   <h2>我是h2</h2>
   <div>div 2</div>
   <div>div 3</div>
   <div>div 4</div>
   <div>div 5</div>
   <div>div 6</div>
   <div>div 7</div>
   <div>div 8</div>
</div>

CSS：

.dome div{
  border:1px solid orange;
  font-weight: bold;
}

.dome div:nth-last-child(2n){
  background: grey;
}

效果：

因为它既然满足元素为div，又要满足2n，才会显示grey背景。

这个问题就需要用E:nth-of-type(n) 来解决。

2.E:nth-last-child(n)

E:nth-last-child(n) 选择器和前面的E:nth-child(n)选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。就不举例说明了。

二、E:nth-of-type(n) 和 E:nth-last-of-type(n)

1.E:nth-of-type(n)

E:nth-of-type(n)选择器和“E:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用E:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便。在E:nth-of-type(n)选择器中的“n”和E:nth-child(n)选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

刚才的那个例子就可以直接利用这个选择器实现，它可以只选中div元素

代码展示：

.dome div:nth-of-type(2n){
  background: grey;
}

效果：这样就可以选出双数的div

2.E:nth-last-of-type(n)

E:nth-last-of-type(n)选择器和前面的E:nth-of-type(n)选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-of-type(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。就不举例说明了。

三、E:first-child和E:last-child

1。E:first-child

E:first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

.dome div:first-child{
  background: grey;
}

2.E:last-child

E:last-child选择器与E:first-child选择器作用类似，不同的是E:last-child选择器选择的是元素的最后一个子元素。

四、其他几种结构性伪类选择器这里就不做详细介绍了。这里主要是介绍上面三种选择器。

五、总结

1.通用子元素过滤器：E:nth-child(n)（顺序过滤）和E:nth-last-child(n)(逆序过滤)

2.通用子类型元素过滤器：E:nth-of-type（顺序过滤）和E:nth-last-of-type(n)(逆序过滤)

3.特定位置的子元素：E:first-child,E:last-child,E:first-of-type,E:last-of-type

4.特定状态的元素：E:root（根节点）、E:only-child（独子元素）、E:only-of-type（独子类型元素）和E:empty（孤节点）

发布于 2022-05-08 21:42

CSS

CSS3

JavaScript