CSS选择器及选择器优先级

最新推荐文章于 2024-07-07 11:28:13 发布

sunset0827

最新推荐文章于 2024-07-07 11:28:13 发布

阅读量436

点赞数

分类专栏： H5学习文章标签： H5 CSS选择器

本文链接：https://blog.csdn.net/Mr_Sunset/article/details/80991712

版权

H5学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS选择器：

css选择器有四种，标签名选择器，id选择器，class选择器，属性选择器，其中属性选择器权重最低且不常用

两个选择器A和B使用,连写时,表示选择满足A或满足B的元素

#p2,#p3{
    color: blue;
}

两个选择器A和B使用空格连接时，表示选择满足A选择器的元素内部的满足B选择器的元素

#list a{
    text-decoration: none;
}

选择器A和B使用>连写时，表示选择满足A选择器元素的子元素中满足B的元素

#list>li{
    list-style: none;
}

选择器A和B直接连写，表示满足选择器A且满足选择器B的元素

#p4.c2{
    background-color: red;
}

在一个父元素中，满足冒号前选择器的元素中的第n个元素

#list li:nth-of-type(1){
    font-size: 40px;
}

偶数个和奇数个

#list li:nth-of-type(2n+1){
    font-weight: bold;
}

属性选择器

选择页面中包含lh属性的元素，lh为自定义属性

[lh]{
    color: orange;
}

选择页面中att属性att值为val的元素

[att=val]{
    color: brown;
}

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style>
        /* 标签名选择器，选择页面中所有h1标签 */
        h1{
            color: red;
        }
        /* id选择器，使用#开头，选择页面中id值为p1的元素 */
        #p1{
            background-color: yellow;
        }
        /* class选择器，使用.开头，选择页面中class值包含c1的元素 */
        .c1{
            color: green;
        }




        /* 两个选择器A和B使用,连写时，表示选择满足A或满足B的元素 */
        #p2,#p3{
            color: blue;
        }

        /* 两个选择器A和B使用空格连接时，表示选择满足A选择器的元素内部的满足B选择器的元素 */
        #list a{
            text-decoration: none;
        }

        /* 选择器A和B使用>连写时，表示选择满足A选择器元素的子元素中满足B的元素 */
        #list>li{
            list-style: none;
        }

        /* 选择器A和B直接连写，表示满足选择器A且满足选择器B的元素 */
        #p4.c2{
            background-color: red;
        }

        /* 在一个父元素中，满足冒号前选择器的元素中的第n个元素 */
        #list li:nth-of-type(1){
            font-size: 40px;
        }
        
        /* 倒数第n个 */
        #list li:nth-last-of-type(1)>a{
            color: orange;
        }

        /* 偶数个和奇数个 */
        #list li:nth-of-type(2n+1){
            font-weight: bold;
        }

        /* 属性选择器 */
        /* 选择页面中包含lh属性的元素 */
        [lh]{
            color: orange;
        }

        /* 选择页面中att属性att值为val的元素 */
        [att=val]{
            color: brown;
        }
    </style>
</head>
<body>
    <h1>CSS选择器大全</h1>
    <p id="p1">id选择器用#表示</p>
    <p class="c1">class选择器使用.表示</p>
    <p class="c1">class选择器使用.表示</p>

    <p id="p2">两个选择器使用,连写</p>
    <p id="p3">两个选择器使用,连写</p>

    <ul id="list">
        <li><a href="#">111</a></li>
        <li><a href="#">222</a></li>
        <li><a href="#">333</a></li>
        <li><a href="#">444</a></li>
    </ul>

    <p id="p4" class="c2">两个选择器直接连写.</p>

    <P lh>HTML标签的属性可以实html属性也可以是自定义属性</P>

    <p att="val">属性选择器</p>
</body>
</html>

选择器优先级：

选择器权重依次为：!important>行内样式>id选择器>class选择器>标签名选择器.

当两个选择器优先级一样时,会选择靠后的选择器的样式（开发中一般不会用到，用处在于导入外部样式表后排bug等）,当多个不同的选择器连用时,优先级会相加

        /* 样式优先级权值参考: */
        /* !important 10000 */
        /* 行内样式(内联样式)(inline style) 1000 */
        /* id选择器 100 */
        /* class选择器 10 */

/* 标签名选择器 1 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        /* 不同的选择器具有不同的优先级，页面中元素最终显示的样式是优先级最高的选择器的样式 */
        
        /* 样式优先级 */
        /* !important>行内样式>id选择器>class选择器>标签名选择器 */
        #title{
            color: red;
        }

        /* 当两个选择器优先级一样时,会选择靠后的选择器的样式 */
        .color{
            color: blue;
        }

        .second{
            color: orange;
        
        
        h1{
            color: green;
        }

        #title.color{
            color: black;
        }

        
    </style>
</head>
<body>
    <h1 id="title" class="color second">css选择器优先级</h1>
</body>
</html>

sunset0827

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器及选择器优先级

CSS选择器： css选择器有四种，标签名选择器，id选择器，class选择器，属性选择器，其中属性选择器权重最低且不常用两个选择器A和B使用,连写时,表示选择满足A或满足B的元素#p2,#p3{ color: blue;} 两个选择器A和B使用空格连接时，表示选择满足A选择器的元素内部的满足B选择器的元素#list a{ text-decoration: n...
复制链接

扫一扫

专栏目录