CSS选择器种类及选择器权重的优先级

最新推荐文章于 2022-06-16 17:03:12 发布

迷醉.

最新推荐文章于 2022-06-16 17:03:12 发布

阅读量230

点赞数

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

本文链接：https://blog.csdn.net/qq_35270769/article/details/116851925

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选择器的种类如下

通配符选择器：*
元素选择器：p
id选择器：#id
类选择器：.class
伪类选择器：:hover
伪元素选择器：::selection
属性选择器：[属性名]

细节如下

注：为保证文章的简洁性，只显示重要代码及图片

通配符选择器：选择页面上的所有HTML元素

<style>
        * {
            margin: 0;
            padding: 0;
            color: red;
        }
</style>
<body>
    <a href="http://www.baidu.com">百度网址</a>
    <h1>这是一级标题</h1>
    <p>这是一个段落</p>
</body>

效果图：
在这里插入图片描述

元素选择器：根据元素名称来选择HTML名称

<style>
        p {
            color: blue;
        }
</style>
</head>
<body>
    <p>这是一个文字颜色为蓝色的段落</p>
</body>

效果图：
在这里插入图片描述

id选择器：选择有特定id属性的HTML元素

<style>
        #pink {
            color: pink;
        }
</style>
</head>
<body>
    <p id="pink">这是一个颜色为粉色的文字段落</p>
</body>
</html>

效果图：
在这里插入图片描述

类选择器：选择有特定class属性的HTML元素

<style>
        .divClass {
            width: 200px;
            height: 200px;
            background-color: red;
        }
</style>
</head>
<body>
    <div class="divClass">这是一个背景色为红色的盒子</div>
</body>
</html>

效果图：
在这里插入图片描述

伪类选择器：定义元素的特殊状态

<style>
         a:hover {
             color: green;
         }
</style>
</head>
<body>
    <a href="htttp://wwww.baidu.com">鼠标放在上面会显示绿色</a>
</body>
</html>

效果图：
在这里插入图片描述
注：一般截图不会把鼠标截上，实际上鼠标是在文字上面的。

伪元素选择器：获取指定元素的某一部分内容来使用

<style>
        p::selection {   
                background-color: black;
                color: white;
        }
</style>
</head>
<body>
   <p>请注意看，我如果选中某些文字，它的样式就会发生改变</p>
</body>

效果图：
在这里插入图片描述

属性选择器：匹配拥有某个属性的元素

<style>
        [src] {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
</style>
</head>
<body>
   <img src="3.jpg" alt="图片不显示时显示的文字">
</body>

效果图：
在这里插入图片描述

选择器权重如下

选择器种类	选择器权重
继承	无权重
通配符选择器	0,0,0,0
元素选择器、伪元素选择器	0,0,0,1
类选择器、伪类选择器、属性选择器	0,0,1,0
id选择器	0,1,0,0
行内元素	1,0,0,0
!important	无穷大