CSS中样式的继承和选择器的权重大小

最新推荐文章于 2022-12-27 18:55:15 发布

Y-琼眸

最新推荐文章于 2022-12-27 18:55:15 发布

阅读量761

点赞数 4

文章标签： css html 前端

本文链接：https://blog.csdn.net/rbh200812/article/details/126052979

版权

一、样式的继承

样式继承的定义：为一个元素设置样式，同时也会运用到它的后代元素上

样式继承的优势：方便开发，通用样式写在共同的祖先元素上

注意：并不是所有样式都会被继承，比如：背景相关的，布局相关等不会被继承

这到底是个什么意思呢，下面看一张图就知道了。

<!DOCTYPE html>
<html lang="en">
<head>
       <style>
        div {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>这是一段话</p>
        <p>这也是一段话</p>
    </div>
</body>

</html>

我们只设置了div的样式，但是div的子元素p里面的样式都会变，这就是继承了父代样式。

二、选择器的权重

在讲权重之前我们先来了解一下什么叫样式冲突。

样式冲突就是通过不同的选择器中同一个元素，进行样式设定，发生样式冲突时，应该用哪个样式呢？这个就是由选择器权重来决定的。

权重大小排列：

(！important)最高级的（写在颜色后面分号前面）

1 内联样式

2 id选择器

3 属性选择器/class选择器

4 元素选择器

5 通配选择器

注意，继承选择器没有优先级

注意：

1.如果选择器权重一样，优先采用靠下面的

2.如果选择器是交集选择器，则所有选择器权重相加，最终谁大听谁的

3.如果选择器是群组选择器（并集选择器），则选择器权重各算各的，选择器权重不会叠加，只会是并集选择器中最大的那个权重

4.选择器的权重相加，再大也不会超过它上一级的权重，例如：class选择器再多也不会超过id选择器

总结：

哪个选择器更具体，它的权重越大。

今天的内容就这些啦

Y-琼眸

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中样式的继承和选择器的权重大小

样式继承和选择器权重的基本内容
复制链接

扫一扫

CSS中样式的继承和选择器的权重大小

一、样式的继承

二、选择器的权重

“相关推荐”对你有帮助么？