css层叠，继承，优先级笔记

最新推荐文章于 2023-08-03 22:00:00 发布

_qz

最新推荐文章于 2023-08-03 22:00:00 发布

阅读量169

点赞数

文章标签： css层叠 css继承 css优先级 css入门

本文链接：https://blog.csdn.net/m0_45210226/article/details/102704232

版权

css层叠，继承，优先级笔记

css三大特征

层叠
继承
优先级

层叠：
层叠是指样式层叠，是浏览器处理冲突的能力。如果一个属性通过两个或多个相同的选择器设置了同一元素的不同样式，这是就会出现冲突，浏览器会以最后的样式为准。* #ps:要是不同的选择器设置了同一属性的不同样式就要比较选择器的优先级问题.*

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div {
        color：blue;
    }
    div {
        color: red;
    }
    </style>
</head>
<body>
<div>css层叠特性</div>
</body>

上述代码中先后通过div元素选择器对颜色进行了样式设置，根据css层叠特性得div元素中文字为red。

继承性
在css中，子标签会继承父标签得某些样式。恰当的使用继承特性，可以简化代码，降低复杂性，子标签可以继承父标签得样式有text-，font-，line-，color，等。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div {
        color: red;
    }
    </style>
</head>
<body>
<div>
    <li>css继承特性</li>
</div>
</body>

上述代码中通过div选择器对div元素的颜色设置为red，之后 li 标签继承div标签的color样式显示为red。

优先级
在两个或多个不同的规则应用于同一元素时，会出现优先级的问题，这时就考虑权重。
1).继承样式的权重为0：即在嵌套结构中，不管父元素的权重多少，子元素继承时权重为 0。
2).行内样式优先：在应用行内style的元素中，其行内样式的权重非常高，比各种选择器的权重要高。
3).当元素的权重叠加在一起后相同时，则考虑最后的样式。
4).css中有 ！important 的命令，被赋予了最高的优先级，出现！importtant 就会执行。
ps：！ important 中的 “！” 不是取反的意思。
附：
下面是一个简单的例子：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #red {
        color: red;
    }
    .blue{
        color: blue;
    }
    </style>
</head>
<body>
<div class="blue">
    <li id="red" class="blue">css权重</li>
</div>
</body>

上述代码首先有一个id选择器定义为red，然后有一个类选择器定义为blue；div标签运用了blue类，
li标签运用了id选择器和类选择器。因为继承的权重为0，所以只考虑 li 标签里面的权重，id选择器的权重为 0，1，0，0 ；而类选择器的权重为 0 ，0 ，1 ，0 ；所以 li 元素中的文字应该运用id选择器
显示为red

总结：

使用！important
内嵌在行内的style声明
id选择器
类选择器，属性选择器，伪类选择器
元素选择器
通用选择器
权重是优先级的算法，层叠是优先级的表现。

我是新手，大佬勿喷，侵删。

_qz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css层叠，继承，优先级笔记

css层叠，继承，优先级笔记css三大特征层叠继承优先级List item层叠：层叠是指样式层叠，是浏览器处理冲突的能力。如果一个属性通过两个或多个相同的选择器设置了同一元素的不同样式，这是就会出现冲突，浏览器会以最后的样式为准。* #ps:要是不同的选择器设置了同一属性的不同样式就要比较选择器的优先级问题.*<head> <meta chars...
复制链接

扫一扫