CSS 特异性
2005 年 5 月 16 日星期一 (格林威治标准时间上午 10:14)
我已添加了一篇关于特异性的简短文章到 HTML Dog 指南中。
在我最初接触 CSS 的时候，有时会遇到浏览器忽略我明确规则的奇怪情况。“我想让文本变成黄色，为什么你非要让它变成白色？看！我告诉你我想让它是黄色的！去你的！我讨厌技术！”
发生这种情况是因为我的选择器不够具体——样式表中存在一个冲突的、更具体的规则，它具有更高的优先级。
这不是一个显而易见的系统，而且通常不会发挥作用，但理解特异性可以避免很多令人挠头的问题，并让你对想要实现的目标拥有更多的控制权。
评论
评论2
“我想让文本变成黄色，为什么你非要让它变成白色？看！我告诉你我想让它是黄色的！去你的！我讨厌技术！”
老兄，我真的说过好多次这句话了！好像你在读我的心一样。
感谢你提供的关于“选择器”数学的有用信息。我以前从来不知道。它已经帮了我一些忙……
Kick The Donkey 于 2005 年 5 月 16 日星期一下午 2:27 GMT 如是说。
评论6
我想指出文章中没有完全说清楚的一点：这些值是基于无限基数的计数系统。因此，一个单独的类选择器的特异性要高于包含 25 个元素选择器的选择器。这就是为什么我在 2001 年就开始用逗号分隔特异性值，CSS2.1 规范也采用了类似的方法。这使得特异性不是基于十进制的累加更加清晰。
所以我会这样写你的例子
p 的特异性是 1 (1 个 HTML 选择器)
div p 的特异性是 2 (2 个 HTML 选择器; 1+1)
.tree 的特异性是 1,0 (1 个类选择器)
div p.tree 的特异性是 1,2 (2 个 HTML 选择器和一个类选择器)
#baobab 的特异性是 1,0,0 (1 个 ID 选择器)
body #content .alternative p 的特异性是 1,1,2 (HTML 选择器、ID 选择器、类选择器、HTML 选择器)
至于浏览器是否一致的问题，答案是“是，但有极其罕见的边缘情况例外”。这些情况往往集中在内联样式（表示为 1,0,0,0）和 !important 声明之间的交互上，它们本身就可以成为一篇文章，仅仅因为它们非常晦涩，需要大量的设置才能解释这些不一致性。
Eric Meyer 于 2005 年 5 月 30 日星期日下午 4:24 GMT 如是说。
评论8
也许值得提一下 Firefox 的 Web Developer Toolbar - 在其众多有用的功能中，有一个功能是你可以点击屏幕上的一个元素，它就会显示应用到该元素上的 CSS 规则。对于解决“为什么会这样？”的谜题非常有用。
Chris Hunt 于 2005 年 6 月 1 日星期三下午 2:07 GMT 如是说。
评论9
!important 有多重要？
比如说，如果我写成这样
p {
color: blue !important;
}
div p {
color: red;
}
} 那么会被如何解读？
Martin Strand 于 2005 年 6 月 6 日星期一中午 12:35 GMT 如是说。
评论11
我以前从未用过 CSS，直到一个朋友给我展示了所有的奇特之处。不过我相信很快就会有更方便的样式管理工具了……
谢谢关注。
Murdoc 于 2005 年 12 月 21 日星期三晚上 7:47 GMT 如是说。
评论12
我认为 CSS 给了你最大的控制权……即使在使用那些不怀好意的横幅裁剪程序时，轮廓也不会因为 CSS 而断裂……
Kingsten 于 2005 年 12 月 22 日星期四晚上 7:47 GMT 如是说。
评论13
也许值得提一下 Firefox 的 Web Developer Toolbar - 在其众多有用的功能中，有一个功能是你可以点击屏幕上的一个元素，它就会显示应用到该元素上的 CSS 规则。对于解决“为什么会这样？”的谜题非常有用。
Kate 于 2006 年 1 月 20 日星期五上午 7:01 GMT 如是说。
另请参阅
- 下一页: Dog Blog 100
- 上一页: @media 2005 售罄
评论1
我有时也会为这个问题苦恼，尤其是在我刚开始学习 CSS 的时候。我发现 Mozilla Firefox 的 DOM 检查器非常有帮助，因为它会显示每条 CSS 规则是如何被评估的，以及哪些规则正在覆盖其他规则。
Edward 于 2005 年 5 月 16 日星期一下午 2:22 GMT 如是说。