html5中的各类选择器使用及优先级

1.基础选择器

1.1标签选择器

p{}

1.2类名选择器

.class{}

1.3id选择器

#idP{}

1.4通配符选择器

*{}

2.层次选择器

2.1后代选择器

    

    


div p{}

2.2子代选择器

    

    


div>p{}

2.3兄弟选择器

    

    

    


//选择后面第一个元素p
.classP+p{}
//选择后面所有元素p
.classP~p{}

3.结构选择器

3.1选择第一个元素

ul>li:first-child{}
ul>li:first-of-type{}

注：-of-type和-child区别

前者选择的元素1为父元素里该元素1的第一个

后者选择的元素1为父元素里第一个元素1，且该元素必须为第一个子元素

3.2选择最后一个元素

ul>li:last-child{}
ul>li:last-of-type{}

3.3选择第几个元素

ul>li:nth-child(1){}
ul>li:nth-of-type(1){}
//2n+1/odd    所有奇数元素
//2n/even    所有偶数元素

3.4除了......之外

//除了class属性值为class_li的元素
ul>li:not(.class_li){}

4.伪类选择器

            1. 元素1:hover>元素2 设置鼠标悬停在元素1上时元素2的样式

            2. :link：超链接还没有被访问

            3. :active：超链接正在被访问

            4. :visited：超链接已经被访问了

超链接的四种状态

/* 未被访问 */
.first:link { color: pink; }

/* 已经被访问 */
.first:visited { color: black; }

/* 鼠标悬停 */
.first:hover { color: yellowgreen; }

/* 正在被访问 */
.first:active { color: gold; }

5.伪元素选择器

            1. 元素1::before    给元素1添加第一个子元素（默认行元素）  

            2. 元素1::after     给元素1添加最后一个子元素（默认行元素）

            注意：::berfore和::after必须与content属性一起连用

    xxxx


div::before{content: "添加内容"}
div::after{content: "添加内容"}

6.属性选择器

            1.元素1[属性1] 选择带有属性1的元素1

            2.元素1[属性1=属性值1] 选择带有属性1并属性值为属性值1的元素1

            3.元素1[属性1*=字符] 选择带有属性1并属性值包含字符的元素1

            4.元素1[属性1$=字符] 选择带有属性1并属性值以该字符结尾的元素1

            5.元素1[属性1^=字符] 选择带有属性1并属性值以该字符开头的元素1

        

            
lorem1
            
lorem2
            
lorem3
        
        评次求足。
        
都不定生向越这，挟。

        a[class]{}
        a[class=first]{}
        a[class*=d]{}

        a[class$=t]{}

        a[class^=t]{}
        //first-letter  设置第一个字符
        .four::first-letter{}
        a.four{}

7.基本选择器（优先级）

优先级

                !important(最高优先级)>行内样式>id选择器>类选择器>标签选择器>*

8.复合选择器

    

        
lorem1
        
lorem2
        
lorem3
    

        .first>.second>a{
            color: orange;
        }
        #first>.second>a{
            color: pink;
        }
        #first a{
            color: blue;
        }

 

选择器权重

由低到高

继承没有优先级

*、兄弟、相邻等                     0,0,0,0

标签选择器                              0,0,0,1

类别、属性选择器                   0,0,1,0

ID选择器                                  0,1,0,0

内联样式                                 1,0,0,0

！important                             1,0,0,0,0

组合选择器       各类相加，但不进位

选择器优先级：！important>内联选择器>ID选择器>类别选择器>属性选择器>伪类>元素选择器>通配符选择器>继承选择器