HTML层叠性&优先级&！important用法

最新推荐文章于 2024-07-25 11:52:08 发布

web世界之窗

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量2.9k

点赞数

文章标签： html 编程语言网页制作前端前端开发

本文链接：https://blog.csdn.net/weixin_45974707/article/details/103603561

版权

一、层叠性

1.定义：CSS处理冲突的一种能力

2.注意点：层叠性只有在多个选择器中“同一标签”，然后又设置了“相同的属性”，才会发生层叠性

3.CSS缩写：Cascading StyleSheet


 #odd{color: red;}

       p{color:blue;}

..........省略代码......... <body>

<p id="odd">我被多处设置属性</p>

解释：如上代码我们对p标签以及odd类进行了属性的设置，但只遵循了一种属性设置，因此可以看出CSS具有解决这种层叠性冲突的功能。开发者工具中也指出了p标签的属性设置不生效。

二、优先级

1.作用：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定

2.优先级的判断的三种方式

（1）是否被直接选中（间接地选中就是“继承”），如果是间接选中那么遵循就近原则。

例子一：遵循直接被选中的情形

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
 li{color: red;}

        p{color:blue;}

..........省略代码......... <ul>

    <li>

        <

最低0.47元/天解锁文章

web世界之窗

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML层叠性&优先级&！important用法

一、层叠性1.定义：CSS处理冲突的一种能力2.注意点：层叠性只有在多个选择器中“同一标签”，然后又设置了“相同的属性”，才会发生层叠性3.CSS缩写：Cascading StyleSheet #odd{color: red;} p{color:blue;}..........省略代码......... <body><p id="odd">...
复制链接

扫一扫