深入理解CSS权重(优先级)

最新推荐文章于 2025-09-10 16:35:14 发布

原创

最新推荐文章于 2025-09-10 16:35:14 发布 · 2.1k 阅读

10 ·

CC 4.0 BY-SA版权

本文详细探讨了CSS权重的计算规则，通过实例分析了选择器权重值的计算，指出网上教程中的一些常见误解。强调了ID选择器并不总是高于多个CLASS选择器的组合，并介绍了!important的特殊权重以及inherit属性的优先级。总结了权重比较的规则，提倡避免使用!important以保持样式规则的清晰。

对于上一篇：你应该知道的一些事情——CSS权重，实战时会遇到一些实际的问题，本篇继续加重对css优先级的理解。最近跟公司同事分享session时在谈到CSS优先级权重问题，引入了之前一直在网上公认的权重计算公式，有好奇者问了一个ClASS选择器组合与ID选择器优先级问题，如果按公式套下来，CLASS组合后是应该高于ID的，但结果实验并非如此，好奇之下，又在晚上找了找，总结如下。

顺序：“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。

网上教程权重计算

深入理解CSS权重(优先级)

关于CSS权重，网上教程大都按不同选择器给了权重值：

STYLE：1000
#ID：100
.CLASS 10
ELEMENT 1

这里引入一张流行的CSS权重关系图：

深入理解CSS权重(优先级)

组合比较

256个class选择器可以干掉1个id选择器

这里引自张鑫旭的一片博客。大致内容是说

Firefox等浏览器所有的类名(classes)都是以8字节字符串存储的，8字节所能hold的最大值就是255. 所以你想啊，当同时出现256个class, 势必会越过其边缘，溢出到id区域。

Opera浏览器class类名的存储是以16字节的字符串。因此，该浏览器要想发生class溢出到id的话，需要连续65536个class。

并且实际做了一个例子来进行比较，代码如下(原文请点击这里)：

css:

# id {
  background: darkblue;
}

.c000.c001.c002.c003.c004.c005.c006.c007.c008.c009.c010.c011.c012.c013.c014.c015.c016.c017.c018.c019.c020.c021.c022.c023.c024.c025.c026.c027.c028.c029.c030.c031.c032.c033.c034.c035.c036.c037.c038.c039.c040.c041.c042.c043.c044.c045.c046.c047.c048.c049.c050.c051.c052.c053.c054.c055.c056.c057.c058.c059.c060.c061.c062.c063.c064.c065.c066.c067.c068.c069.c070.c071.c072.c073.c074.c075.c076.c077.c078.c079.c080.c081.c082.c083.c084.c085.c086.c087.c088.c089.c090.c091.c092.c093.c094.c095.c096.c097.c098.c099.c100.c101.c102.c103.c104.c105.c106.c107.c108.c109.c110.c111.c112.c113.c114.c115.c116.c117.c118.c119.c120.c121.c122.c123.c124.c125.c126.c127.c128.c129.c130.c131.c132.c133.c134.c135.c136.c137.c138.c139.c140.c141.c142.c143.c144.c145.c146.c147.c148.c149.c150.c151.c152.c153.c154.c155.c156.c157.c158.c159.c160.c161.c162.c163.c164.c165.c166.c167.c168.c169.c170.c171.c172.c173.c174.c175.c176.c177.c178.c179.c180.c181.c182.c183.c184.c185.c186.c187.c188.c189.c190.c191.c192.c193.c194.c195.c196.c197.c198.c199.c200.c201.c202.c203.c204.c205.c206.c207.c208.c209.c210.c211.c212.c213.c214.c215.c216.c217.c218.c219.c220.c221.c222.c223.c224.c225.c226.c227.c228.c229.c230.c231.c232.c233.c234.c235.c236.c237.c238.c239.c240.c241.c242.c243.c244.c245.c246.c247.c248.c249.c250.c251.c252.c253.c254.c255 {
  background: darkred;
}

test {
  display: block;
  height: 100px;
  width: 100px
}