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

1.基础选择器

1.1标签 选择器

p{}

1.2类名 选择器

&lt;p class="classP"&gt;&lt;/p&gt;

.class{}

1.3id 选择器

<p id="idP"&gt;</p&gt;

#idP{}

1.4通配符 选择器

<p&gt;</p&gt;
<a herf=""&gt;</a&gt;

*{}

2.层次选择器

2.1后代选择器

<div&gt;
    <p></p>
    <a herf=""></a>
</div>

div p{}

2.2子代选择器

<div>
    <p></p>
    <a herf=""></a>
</div>

div>p{}

2.3兄弟选择器

<div>
    <p class="classP"></p>
    <p></p>
    <p></p>
</div>
//选择后面第一个元素p
.classP+p{}
//选择后面所有元素p
.classP~p{}

3.结构选择器

<div>
    <ul>
        <li class="class_li"></li>
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>    
    </ul>
</div>

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. :vi site d：超链接已经被访问了

<a href="#" class="first">超链接的四种状态</a>

/* 未被访问 */
.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添加最后一个子元素（默认行元素）

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

<div>
    <span>xxxx</span>
</div>

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

        <ul>
            <li><a href="#" class="first">lorem1</a></li>
            <li><a href="#" class="second">lorem2</a></li>
            <li><a href="#" class="thrid">lorem3</a></li>
        </ul>
        <a href="#" class="four">评次求足。</a>
        <p class="four">都不定生向越这，挟。</p>

        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.复合选择器

    <ul class="first" id="first">
        <li class="second"><a href="#">lorem1</a></li>
        <li class="second"><a href="#">lorem2</a></li>
        <li class="second"><a href="#">lorem3</a></li>
    </ul>

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