34种常用选择器

一、4种基本选择器

1. * 通配符 能够匹配所有元素

*{
        margin: 0px;
        padding: 0;
}

2.标签选择器

h1{
        color: yellow;
    }

3.class类名选择器

.item{
        background-color:green;        
    }

4.id选择器

 #p{
        background-color: chocolate;
    }

优先级最高

二、5种符号选择器

1.逗号选择器

.p1,.p2,.p3{
            color: aqua;
        }

两边独立 满足一个即可

2.空格选择器

.container span{
            font-size: 200px;
        }

两边独立 右边是左边子孙元素

3.大于号选择器

.small-font>span{
            font-size: 50px;
        }

两边独立 右边是左边直接子元素

4.加号选择器

.next>span+span{
            color: green;
        }

两边独立 右边是左边下一个紧邻元素

5.波浪号选择器

.nextall span~a{
            color: violet;
       }

两边独立 右边是左边下面的元素 同级 父元素

三、6种属性选择器

1.[属性名]{}

[title]{
            color: red;
        }

拥有属性名title的标签

2.[属性名=值]{}

 [title="t2"]{
            color: green;
        }

拥有属性名title并且值为t2的标签

3.[属性名^=val]{}

[title^="t"]{
            background-color: lightblue;
        }

拥有属性名title并且值以t开头的标签

4.[属性名$=val]{}

[title$="3"]{
            font-size: 50px;
        }

拥有属性名title并且值以3结尾的标签

5.[属性名*=val]{}

 [class*="span"]{
            color: aqua;
        }

拥有属性名class并且值包含span内容

6.[属性名~=val]{}

[class~="span5"]{
            font-size: 30px;
            color: black;
        } 

拥有属性名class并且值其中一个等于span5

四、7种伪类选择器

1. a:link

 a:link{
            font-size: 10px;
        }

超级链接普通状态 未访问状态

2. a:visited

a:visited{
            font-size: 20px;
        }

超级链接访问过状态

3. :hover

a:hover{
            color: violet;
        }  

所有标签鼠标划入

4. :active

a:active{
            color: aqua;
        }

所有标签鼠标点击

5. :focus

聚焦

6. :disabled

禁用

7. :checked

选中

五、十二种特殊选择器

1. :first-child

 .container div:first-child{
            color: red;
        }

作为父标签的第一个子标签

2. :last-child

div:last-child{
            background-color: green;
        }
        

作为父标签的最后一个子标签

3. :nth-child(n)

.container div:nth-child(2){
            color: blue;
        }

作为父标签的第n个子标签

4 :nth-last-child(n)

div:nth-last-child(2){
            font-size: 50px;
        }

作为父标签的倒数第n个子标签

5. :only-child

div:only-child{
            border: 1px solid lightcoral;
        }

作为父标签只有自己这一个子标签

6. :first-of-type

div:first-of-type{
            color: turquoise;
        }

父标签当前类型第一个子标签

7. :last-of-type

span:last-of-type{
            color: red;
        }

父标签当前类型最后一个子标签

8. :nth-of-type(n)

span:nth-of-type(2){
            color: green;
        }

父标签当前类型第n个子标签

9. :nth-last-of-type(n)

span:nth-last-of-type(2){
            color: green;
        }

父标签当前类型倒数第n个子标签

10. :only-of-type

p:only-of-type{
            color: blue;
        }

父标签当前类型唯一一个子标签

11. :not()

span:nth-child(even):not(  span:nth-child(4)  ){
            font-size: 30px;
        }

否定 满足前边 但是不满足后边

12. :empty

 span:empty{
            display: inline-block;
            width: 100px;
            height: 20px;
        }

空 选择内容为空的元素

这些就是css中常用的样式，一共34种，可以按照 4 5 6 7 12的方式来记