前端学习笔记28-选择器的权重

最新推荐文章于 2023-03-29 20:21:14 发布

小欣CZX

最新推荐文章于 2023-03-29 20:21:14 发布

阅读量332

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/116277265

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记28-选择器的权重

样式冲突
选择器权重
复合选择器
简单理解
相同优先级的情况
！important

样式冲突

当我们用不同的选择器选中了相同的元素，并且对相同样式设置了不同的值时，就发生了样式冲突。如下代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>
        div{
            color:yellow
        }
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="box1" class="red">我是一个div <span>我是div中的span</span></div>
</body>
</html>

为同一个元素设置颜色，结果如下图，
在这里插入图片描述
显示的是类选择器的设置。

选择器权重

选择器的权重又高到低排序为：
内联样式
id选择器
类和伪类选择器
元素选择器
通配选择器
继承的样式

复合选择器

交集选择器的优先级是相加的，即div#box1的优先级大于#box1。但是多个类选择器的相加并不能比id选择器的优先级高。
并集选择器则是各自计算。

简单理解

选择器选择的内容越具体，它的优先级越高。

相同优先级的情况

看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>
        .yellow{
            color:yellow
        }
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="box1" class="red yellow">我是一个div <span>我是div中的span</span></div>
</body>

结果为红色
在这里插入图片描述
这时把style中选择器位置调换一下，

    <style>
        .red{
            color:red
        }
        .yellow{
            color:yellow
        }
    </style>

变成了黄色。
在这里插入图片描述
所以，当相同优先级的选择器冲突时，最下面的选择器有效。

！important

如果我在样式后面加！important，则可以提高它的优先级。

    <style>
        .red{
            color:red !important
        }
        .yellow{
            color:yellow
        }

    </style>

在这里插入图片描述
注意：慎用！important，因为如果写了它，就没法改了。

小欣CZX

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端学习笔记28-选择器的权重

前端学习笔记28-选择器的权重样式冲突选择器权重复合选择器简单理解相同优先级的情况！important样式冲突当我们用不同的选择器选中了相同的元素，并且对相同样式设置了不同的值时，就发生了样式冲突。如下代码，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫