结构伪类

:nth-child(1)

获取父元素中的第一个子元素

<style type="text/css">
    ul li:nth-child(1){
        color: #67c23a;
    }
</style>

参数改变，寻找指定的元素。

<style type="text/css">
/*    取偶数对应特定的值*/
    ul li:nth-child(2n){
        color: #9cb8d4;
    }
</style>

<style type="text/css">
/*    取前五个*/
    ul li:nth-child(-n+5){
        color: red;
    }
</style>

:nth-last-child(1)

取倒数第一个子元素，参数改变取值随之改变。

  <style type="text/css">
/*   取倒数第二个--*/
   ul > li:nth-last-child(2){
     color: red;
   }
  /*取倒数后几个*/
   ul > li:nth-last-child(-n+3){
     color: blue;
   }
  </style>

:nth-of-type()

只计算符合为元素类型的数量的元素

<style>
    /*需求：选中box中的第三个div元素*/
    .box > div:nth-child(3){
      color: red;
    }
    /*只计算符合为元素类型的数量的元素*/
    .box > div:nth-of-type(3){
      color: blue;
    }
  </style>

除上述的内容之外，还有如下结构伪类：

  • :first-child，等同于nth-child(1)
  • :last-child，等同于:nth-last-child(1)
  • :first-of-type，等同于:nth-of-type(1)
  • :last-of-type，等同于:nth-last-of-type
  • :only-child，是父元素中唯一的子元素。
  • :only-of-type，是父元素中唯一的这种类型的子元素。

下面的伪类偶尔会使用

:root，根元素，就是HTML元素

:empty，代表里面完全是空白的元素。

否定伪类

:not()的格式是:not(x)

x是一个简单选择器

元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类