CSS样式的优先级浅谈

我会带着你远行 2024-03-30 14:37 96阅读 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 条评论，96人围观）

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

相关阅读

相关 css样式的优先级总结

考资料： 1、[CSS选择器及优先级总结][CSS_] 2、[Web前端面试指导(十三)：css样式的优先级是怎么样的？][Web_css] 3、[CSS的...

蔚落/ 2024年04月17日 16:35/ 0 赞/ 94 阅读

相关打印样式CSS的技巧浅谈

不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果：使用[响应式布局][Link 1]设置打印的

男娘i/ 2024年04月03日 10:12/ 0 赞/ 84 阅读

相关 CSS样式的优先级浅谈

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

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

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

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

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

相关关于打印样式CSS浅谈

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

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

相关关于CSS样式的优先级浅谈

![475983fd18c9f897d1c971a317a68cc2.jpeg][] 优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式例：

雨点打透心脏的1/2处/ 2024年03月24日 21:56/ 0 赞/ 84 阅读

相关 css样式引入优先级

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

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

相关浅谈CSS样式

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

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

相关 css 样式引入的优先级

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

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

相关 css样式优先级

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

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