关于CSS样式的优先级原则介绍

向右看齐 2024-04-03 13:31 76阅读 0赞

![9173b70cc0b05f772aac748e94223131.jpeg][]

**优先原则一**：文本从上到下，后出现的样式优先于前面出现的同一样式  
  
例：  
  
<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色。

来源：[微点阅读][Link 2] [https://www.weidianyuedu.com][Link 2]

[9173b70cc0b05f772aac748e94223131.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a3bde854e5c948b3bc6eb00e69d5a788.jpeg
[Link 1]: https://so.csdn.net/so/search?q=%E4%BC%98%E5%85%88%E7%BA%A7&spm=1001.2101.3001.7020
[Link 2]: https://www.weidianyuedu.com