CSS样式的优先级浅谈

我会带着你远行 2024-03-30 14:37 73阅读 0赞

**优先原则一**：文本从上到下，后出现的样式优先于前面出现的同一样式

例：

<styletype=”text/css”>

.def1\{background:black;\}

.def2\{background:yellow; \}

</style>

<div class=” def2def1″>测试1</div>

结果：所有浏览器均yellow色，注意：与class=””引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。

**优先原则二**：id声明（即 \# 开头的样式）>class声明（即 . 开头的样式）> 标签声明(即 类似 div 开头)

以上三种声明处于不同的量级，份量上，div 开头相当于 1克 重，. 开头相当于 1公斤 重，\#开头相当于 1吨 重。

例：

<styletype=”text/css”>

\#bb\{background:pink\}

.def\{background:black;\}

div\{background:yellow; \}

</style>

<div id=”bb”class=”def”>测试2</div>

结果：所有浏览器均pink色，注意：虽然按优先原则一，后出现的权重高，但那只是在同样重量级下的比较，优先原则二各重量级别就不同了。

**优先原则三**：数量取胜。如果同一个样式声明即一个大括号\{\}由多个\# . 或 div 组成，则权重按出现符号的量级增加

比如：\#bb \#tt \#dd \{background:red\} 则重量等于3吨

\#bb .tt ul.dd li \{background:red\}则重量等于1吨2公斤2克，这么精确的重量，就不需要举例了吧。

再次说明：优先原则一只适用两个样式声明同样重的情况

**优先原则四**：‘!important’。相当于无限重量，在之前已经有说明，需要注意：ie下，在同一条样式声明即一个大括号中出现的!important会被随后出现的同名样式冲洗掉。

<styletype=”text/css”>

.def1\{background:yellow!important;background:red;\}

.def2\{background:green;\}

</style>

<div class=”def1 def2“>dd</div>

结果：ie下，green色，background:yellow!important被后面的background:red冲洗了，而background:red与background:green的较量中，前者败在优先原则一之下。

**优先原则五**：近水楼台。<divstyle=”background:black”></div>直接写在元素体内的style[优先级][Link 1]别最高！（仅次于!important）用重量来形容，可以定为百万吨量级。

<styletype=”text/css”>

.def1\{ background:red;\}

</style>

<div class=”def1 ”style=”background:black”>dd</div>

结果：black色。

<styletype=”text/css”>

.def1\{ background:red !important;\}

</style>

<div class=”def1 ”style=”background:black”>dd</div>

结果：red色。

<styletype=”text/css”>

.def1\{ background:red !important;\}

</style>

<div class=”def1 ”style=”background:black!important”>dd</div>

结果：black色。

转载自： [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[Link 1]: https://so.csdn.net/so/search?q=%E4%BC%98%E5%85%88%E7%BA%A7&spm=1001.2101.3001.7020
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关强制改变css样式优先级

1:!important作用是提高指定CSS样式规则的应用优先权。在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声

ゝ一世哀愁。/ 2024年04月06日 09:19/ 0 赞/ 78 阅读

相关 CSS样式的优先级浅谈

优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式例： <styletype=”text/css”> .def1\{background:black;\}

我会带着你远行/ 2024年03月30日 14:37/ 0 赞/ 74 阅读

相关 CSS样式属性及CSS样式表浅谈

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][https_www.weidianyuedu.com] 【长度单位】 CS

迈不过友情╰/ 2024年03月29日 16:31/ 0 赞/ 93 阅读

相关关于打印样式CSS浅谈

![e69c0441a7cc790911bf81bbf4886c7d.jpeg][] 不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。我们WEB开发人员可以简

﹏ヽ暗。殇╰゛Y/ 2024年03月26日 16:39/ 0 赞/ 75 阅读

相关浅谈CSS的三大特性(继承性，层叠性，优先级)

一、继承性当给父元素设置一些属性时其子元素也可以继承该特性称为继承性注意点： 1、并非所有的属性都可以继承只有以color/font/text/lin

￡神魔★判官ぃ/ 2023年07月12日 08:49/ 0 赞/ 4 阅读

相关 css样式引入优先级

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淩亂°似流年/ 2023年06月18日 10:58/ 0 赞/ 10 阅读

相关浅谈CSS样式

CSS全称为“层叠样式表 (CascadingStyle Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：

向右看齐/ 2022年06月11日 22:55/ 0 赞/ 187 阅读

相关 css 样式引入的优先级

参考： [https://www.cnblogs.com/shengtianlong/archive/2010/08/11/1797667.html][https_www.cn

- 日理万妓/ 2022年06月04日 08:42/ 0 赞/ 315 阅读

相关 css样式优先级

有时在设置 HTML 元素时，会遇到相互冲突的多个样式。这时，到底是选择哪个的样式呢？看完下面的文章，你就懂了 1.在body上设置样式， <style type=

心已赠人/ 2022年05月29日 13:39/ 0 赞/ 293 阅读

相关 CSS样式的继承性和优先级

本文主要内容 CSS的继承性 CSS的层叠性计算权值权值问题大总结 CSS样式表的冲突的总结权值问题深入

桃扇骨/ 2022年05月15日 15:21/ 0 赞/ 317 阅读