问题标签 [css-specificity]

这是一个很长的镜头，但是是否有可用的工具通过删除不需要的特异性来优化 CSS 选择器？

我发现当我写 CSS 时，我故意让我的选择器比必要的更具体，以避免冲突和准文档。

如果有一种工具可以分析给定的一组规则，确定它们与其他规则重叠的“唯一性”，然后去除任何不必要的特殊性，那就太好了。

我什至无法想象工具开发人员将如何处理这需要的所有场景，但我之前曾被其他人在该领域的独创性所震撼，并认为值得一问。

更新：

我为这个问题添加了一个赏金，我越想它，我就越意识到CSS 特异性过滤器的价值。

例如，在Sass和LESS中使用嵌套规则/选择器时，过度嵌套是一种常见且众所周知的反模式，很容易导致选择器过于具体。

在优秀的 TutsPlus 课程使用 Sass 和 Compass 可维护的 CSS中有一个很好的说明：

Sass 将遵循这些嵌套指令并生成以下 CSS 输出，不反对任何不必要的特殊性：

但是，如果存在/确实存在特异性过滤器，它将为 CSS 开发人员带来潜在的好处：

1. 您可以将样式表组织为 DOM 的 1:1 映射，类似于您在 Firebug 和 Chrome 开发工具中检查样式规则时看到的内容。智能编辑器/IDE 可以为具有共享样式/类的 DOM 元素自动填充样式。当然，这种冗余会被特异性过滤器/优化器过滤掉。

2. 样式表的结构可以由扫描 DOM 并将其转换为 CSS 选择器/规则的工具预先填充。这意味着开发人员只需要更新 HTML；CSS“树”将保持同步以反映 DOM 的当前状态。智能编辑器可以让您跳转到元素/类的 CSS 定义以进行样式设置——甚至可以在单独的面板中显示其样式规则。

在某种程度上，这似乎是一种倒退——就像您在 Dreamweaver 或 WebAssist 中发现的帮助新手学习 CSS 的功能一样。但是 CSS 选择器优化工具的基本思想似乎很简单，我所描述的工作流自动化类型将是合乎逻辑的下一步——催化剂将是特异性过滤器。

我查看了一些更知名的 CSS 编辑器和 Web IDE，但除了针对单个元素并为其生成选择器之外，没有发现任何提供此类功能的东西。

更新 2：CSS 选择器性能

针对 Spliff 的评论，这里有两篇关于 CSS 选择器性能的精彩文章：

• CSS 选择器的性能影响Steve Souders

• Chris Coyier 的《高效渲染 CSS 》

两者都同意微优化 CSS 不值得努力，但过度限定的后代选择器是“效率灾难”。我自己还没有进行基准测试，但怀疑我建议的那种“DOM 映射”方法会在没有优化步骤的情况下导致性能下降，无论是手动的还是自动的。

相关问题、链接和工具：

CSS 特殊性的要点

查看 CSS 特性的工具

清理 CSS 的工具

按 CSS 特异性排序

Massive CSS 的 5 大错误

谷歌：高效的 CSS 选择器

处理器

干净的 CSS

CSS 整洁

在这个例子中：

http://jsfiddle.net/Ja29K/

登录链接必须是蓝色的不合逻辑吗？

我知道声明具有相同的起源和相同的重要性，因此需要对它们进行评分（选择器的特异性）。

为了计算选择器的特异性，我为每个选择器创建了一个表：

A = 内联样式数：0
B = ID 数：0
C = 类数：0
D = 元素数：0

所以登录元素有3个与他的颜色相关的碰撞：a， #header a，#login

element (A, B, C, D)

a (0, 0, 0, 1) = 1
#header a (0, 1, 0, 1) = 101
#login (0, 1, 0, 0) = 100

选择器“#header a”获胜，因为它的得分最高。

但

如果我们将选择器 "#login" 更改为 "a#login"，我们将有：
a#login (0, 1, 0, 1) = 101
选择器 "#header a" 失败，因为平局赢得最后这是宣布的。

所以，我无法理解的是：

由于“#header a”选择器引用了许多元素，而 ID 选择器（例如 #login）只引用了一个元素，因此我们希望将 ID 选择器声明应用于该元素是合乎逻辑的，对吗？我真的无法理解这个 CSS 优先逻辑，因为我认为 ID 选择器基本上必须是最具体的东西，就像内联样式一样。

PS：对不起我的英语不好:)

好的，我试图将 CSS 级联和特异性理解为一门“科学”，而不是总是将其留给“命中或失败”的方法。我希望有人能帮助我。

我有一个规则：

我需要覆盖以更改特定实例中的边距。

所以我添加了一个class并div写道：

但是，规则 2 并没有覆盖规则 1。

所以我将规则 2 修改为：

它会覆盖“ .bluebutton”规则。/* 规则1 */

起初我写了这个 HTML

然后我修改并将按钮包含在 a 中div并写道：

html-2 适用于规则 3。

有人可以帮我理解为什么规则 3 会覆盖规则 1，而规则 2 不会覆盖规则 1？看起来规则 2 和 3 具有相同的权重（对我而言）。是因为规则 2以 a of和anchor的任何元素内的任何标签为目标，而规则 3 仅以a of 为目标吗？我希望我能清楚地解释我想要理解的内容。class.bluebutton.asideanchorclass.bluebutton

谢谢！

我想知道在以下情况下一个有效的算法是什么：

给定一组解析的 css 规则，例如。

从 css 样式表中，有可能多个规则集适用于给定元素（比如<p class="pStyle anotherPStyle">hello</p>我的文档中的 a）。

我需要首先确定样式表中的哪些规则适用于给定元素（所以这里是p, pStyle and anotherPStyle），然后创建一个能够按特定性（从最特定到最一般）对适用规则进行排序的比较器。注意：我已经设计了一种算法来应用排序后的规则，因此您无需有效地解决该问题。

我一直在玩弄几个想法，即一个涉及确定给定规则特定于 DOM 树的级别....虽然我不确定这是否是正确的方法？

浏览器引擎如何有效地做到这一点？我希望在 Java 中复制它，但我对许多其他语言感到满意，因此您可以提供的任何代码都非常感谢。

谢谢

给定一个 html 片段：

为什么 chrome 和 Mozilla 都选择这个规则：

当我希望他们选择时：

Firebug 显示了两个规则都被应用了，但是无论多么“选择性”，我认为我正在制作第二个选择器链，第一个选择器显示在顶部，第二个选择器的样式在列表的下方，全部被覆盖（在萤火虫 UI 中删除）

FWIW，我确实验证了添加基于 id 的选择器确实首先被选中。我只是不想到处分配ID。如：

谁能帮我使上面的第二个 CSS 选择器比第一个更具体？

这一切都与我在最近发布的 primefaces 引导主题中发现的一个错误有关，该主题模仿引导样式。就我而言，我也在使用实际的引导程序，并希望将 btn-primary 之类的样式应用于 pf commandButtons 等。

这工作正常，直到您将 commandButton 放在 primefaces 面板中......此时 pf 主题中的按钮样式正在破坏引导程序的样式。我原以为我可以在 bootstrap css 中添加一个选择器，让它从 pf 中获取特异性……但显然我有更多的 CSS 选择器 Star Wars 可以玩…… http://www.stuffandnonsense .co.uk/archives/css_specificity_wars.html

我正在尝试根据他们的祖先（不是父母，特别是）来设置一些按钮的主题，所以......我有以下 HTML 结构

好吧，正如你所看到的，有两个主题.theme-a和.theme-b

CSS 代码如下所示：

问题是：如果您切换主题类（A 与 B，B 与 A），您会注意到 A 主题上的按钮（与主题类有更近的祖先，保持远祖先的样式，蓝色背景而不是黑色背景）。

如何以根据最近的祖先设置按钮属性的方式实现适当的特异性？

这是来自 JSfiddle 的链接：http: //jsfiddle.net/XVaQT/1/

我希望我解释清楚:)

谢谢​</p>

这是我试图解决的一个困难。我正在客户页面内开发滚动界面。基本上，我无法更改文档类型、周围元素以及已经在客户端页面中的样式表或脚本，我必须让我的小代码块“适合”其中。这对于 Web 开发人员来说很常见。现在棘手的部分是我的块中的一些 img 元素实际上被继承的客户端样式表中的 CSS 规则定位（当然，我不能删除或更改）。解释为什么在这种情况下我实际上不能自己使用更具体的 CSS 规则来弥补这一点太长了，但这是事实。所以我的问题是：除了创建另一个规则或删除规则之外，有没有办法防止 HTML 元素成为 CSS 规则的目标？困难在于像这样的规则

将针对内部的一个元素：

页面内的元素不会为 CSS 规则制造“墙”，这些规则会“跳过”容器以到达目标元素。所以像这样的规则

将针对任何 img 标签。我知道弥补这一点的唯一方法是创建一个更具体的 CSS 规则，针对要保护的精确 img。但我不能在这里这样做。有没有办法在不创建 CSS 规则的情况下仅通过添加 HTML 来获得相同的结果？

/ * 编辑澄清* /

我知道 CSS 规则、特异性、继承等。我的问题更务实。考虑这个例子来澄清问题：假设您有一个您无法触摸的客户样式表，它定义了以下一般规则：

问题是您不能设置相应的通用规则来做相反的事情，例如：

因为没有对立面这样的事情。的反义词"none"可以是"inline", "block", "inline-block", 等等。

所以基本上，这意味着第一个通用规则会强制您为页面中display的每一个明确定义属性img。这很糟糕。所以我试图找到一个破解方法来解决这样的情况（我的实际问题比这更糟糕，相信我，但这个例子更清晰，更容易解释）。

考虑来自 twitter bootstrap https://github.com/twitter/bootstrap/blob/master/less/wells.less<div class="well well-large well-small" />的以下样式

CSS 如何决定在这种情况下应用哪个填充？会是 19px、24px、9px 还是未定义的值？我对特异性的理解是初步的，在这种情况下，似乎存在特异性联系.well .well-large and .well-small

我正在使用 twitter bootstrap (TB)，似乎他们的 CSS 规则在他们不应该的时候优先。我创建了这个小提琴来显示问题：

http://jsfiddle.net/whoiskb/Za2TB/

HTML

CSS（加上 twitter bootstrap 的外部链接）

根据我对特异性规则的了解，为 TB 中的标签定义的规则应该只得到 1 的值，因为 html 选择器的值是 1。我的类应该有 23 的值，因为我有 3 个 html 选择器和 2 个类选择器每个应该得到 10 的值。正如您在小提琴中看到的那样，尽管 TB css 定义中的标签选择器优先。

有人可以解释我在这里缺少什么吗？

顺便说一句，我知道我可以使用 !important 标签来解决这个问题，我只是想更好地理解 CSS 特异性规则。

我正在使用 Sass 将我的 SCSS 样式表编译成单个assembled.css以减少 HTTP 请求。为了命名单个页面的样式，我将每个页面特定的 CSS 文件包装在该页面<body>元素的 ID 选择器中 - 例如：

在 nanoc（使用 ERB）中，我有一个帮助程序，它根据 HTML 文件夹结构为每个页面的正文分配一个以破折号分隔的唯一 ID，因此根页面将是#support或#products，而它们的子页面将具有类似 `#products 的 ID -巨型空间激光”。

我想制定一组仅适用于这些“产品”子页面（不包括根级#products页面本身）的 SCSS 规则。如果我为此使用属性选择器而不是 ID，有什么我应该注意的关于特异性的，如下所示？

我真的不想使用!important，但我确实想确保这些特定于页面的规则优先于在 @import 顺序中位于它们之前的 '_base.scss' 部分中设置的样式。鉴于我可以完全控制 HTML 结构，理论上我也可以在 Sass 文件中使用 Erb 来替换以逗号分隔的 ID 列表，如下所示：

- 但这似乎很不雅。提前致谢。

编辑：

我以非常依赖级联的方式编写了其他样式：

1. 规范化 CSS
2. HTML5 Boilerplate 和我自己的明智的家规
3. CSS 库（在本例中为 Bourbon & Neat）
4. 一个“_source.scss”，它依次导入自己的 mixins 和占位符选择器。
5. 一个“_base.scss”，用于设置每个页面的默认布局框架。
6. 一系列 .scss 文件用于每个页面的单独内容样式 - 我希望在必要时覆盖base.scss 布局决策（如果页面需要严重偏离规范）。

无论哪种方式，这些单独的页面样式表肯定需要比早期的默认设置具有更高的特异性，因为它们是为特定目的和页面编写的。我故意不使用任何 ID 选择器，除了这个特定目的 - 命名空间页面样式表。

使用，说

在“_base.scss”中会超过

在更进一步的级联“products.scss”中，不是吗？（注意，我知道需要使用四个类是一种糟糕的做法，我只是不想担心某些东西会从命名空间中溜走）。

我想还有另一个 - 非常肮脏的 - 选项：多次重复 body[id^="products-"]选择器，甚至超过最具体的班级强度规则。