关于css中选择器的那些事

1.类选择器

.pink {
         color: pink;
       }

2.id选择器

#pink {
         color: pink;
       }

3.通配符选择器

* {
         color: pink;
   }

4.1结构伪类选择器1

（1）:first-child代表子元素中的第一个元素节点

ul li:first-child{
                    background-color: skyblue;
                }

（2）:last-child代表子元素中最后一个元素节点

ul li:last-child{
                    background-color: skyblue;
                }

（3）:nth-child（n）可以自主选择子元素节点-------该n从1开始

1.n写具体数字，代表子元素中该数字所对应的元素节点

2.直接写n,代表子元素中所有元素节点

3.2n代表子元素中所有偶数元素节点，2n+1则代表奇数

     
 ul li:last-child{
          background-color: skyblue;
        }
 ul li:nth-child(2){
            background-color: purple;
        }
 ul li:nth-child(2n){
            background-color: gray;
        }

4.2.结构伪类选择器2

（1）:nth-of-type(n)

ol li:nth-of-type(2){
       background-color: red;
      }

5.伪元素选择器-----用于字体图标、一些遮罩层

（1）::before

div::before{
          content:'前面';
        }

（2）::after

 div::after{
            content:'后面';
       }

6. :focus伪类选择器----常用于input聚焦

input:focus {
            background-color: rgb(126, 4, 248);
          }

7. 属性选择器（可以是任意节点，可以是任意属性）-----不限于input，不限于value值

（1）.input[属性]----拥有该属性

（2）.input[属性="值"]----拥有该属性且值为对应值

（3）.input[属性^="以什么开头"]----该值以什么开头

（4）.input[属性$="以什么结尾"]----该值以什么结尾

（5）.input[value="a"]-----该值含有什么值

input[value] {
                color:red;
            }
input[value="password"] {
                color:skyblue;
            }
input[value^="f"]{
                color:yellow;
            }
input[value$="i"]{
                color:purple;
            }
input[value*="a"]{
                color:green;
            }

7.关于链接的选择器

（1）:visited表示已经访问

（2）:hover表示鼠标滑过

（3）:active表示鼠标长按

a:link {
            color: gray;
            text-decoration: none;
        }
a:visited {
            color: red;
        }
a:hover {
            color: skyblue;
        }
a:active{
            color: rgb(0, 255, 128);
        }

常用CSS选择器的汇总

关于css中选择器的那些事