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

本文介绍: web 前端 html5、css的各类选择器的使用和优先级

p{}

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

.class{}

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

#idP{}

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

*{}

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

div p{}

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

div>p{}

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

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

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

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

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

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

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

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

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; }

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

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

        <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{}

    <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;
        }