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

《独自往前》

于 2023-06-09 17:17:00 发布

阅读量2.1k

点赞数

分类专栏： Web前端文章标签： html5 css javascript

本文链接：https://blog.csdn.net/Singe_lq/article/details/131092436

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.基础选择器

1.1标签选择器

p{}

1.2类名选择器

<p class="classP"></p>

.class{}

1.3id选择器

<p id="idP"></p>

#idP{}

1.4通配符选择器

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

*{}

2.层次选择器

2.1后代选择器

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

<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添加最后一个子元素（默认行元素）

注意：::berfore和::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;
        }