伪类选择器

一、锚伪类

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

二、UI元素状态伪类

1.checked

2.disabled

3.enabled

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

三、结构伪类

1.:first-child

2.:last-child

3.:nth-child(3)

4.:nth-child(n)  => 等价于所有

5.:nth-child(2n)=> nth-child(even)

6.:nth-child(2n-1) => nth

7.:nth-child(n+5)

8.:nth-child(-n+5)

9.:nth-child(4n+1)

10.:nth-last-child()

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

12.:nth-last-child(2n-1)

 

13、first-type-of

13、last-type-of

14、:nth-of-type

15、:nth-last-of-type

16、:only-child和:only-of-type

三、否定选择器（:not）

 .inner:not(:nth-child(2)){
   color:red;
 }

  .ulcontainer li:not(:nth-child(-n+3)){
     background:#ddd;
     margin-top: 10px;
     border:1px solid red;
  }

　　.ulcontainer li:not(:last-child){ // 最后元素不加底边框

　　　　background:#ddd;

　　　　margin-top: 10px;

　　　　border-bottom:1px solid red;

　　}

四、伪元素

两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

::first-line

::first-letter

::before和::after

 .inner::before{
      content:'';
      display: block;
      height: 0;
      border-top:1px solid red;
    }
    .inner::after{
      content:'';
      display: block;
      height: 0;
      border-top:1px solid blue;
    }

 

 

参考：

https://www.w3cplus.com/mobile/basic-knowledge-of-mobile.html

https://www.w3cplus.com/css3/pseudo-class-selector