问题标签 [css-specificity]

我有它的 html 表格和布局（类似的东西，我也使用 haml+sass）：

我的 htm 表有类斑马，而 tr 有类 .zebra-stripe .zebra1

但是我有其他样式的链接（如按钮），这个链接有自己的背景高度，但悬停时颜色设置为橙色，

但是当我的鼠标悬停在这个链接上时，它的颜色不是橙色，而是为表格设置的蓝色......有什么问题？

如何将链接悬停文本颜色设置为橙色（我设置了它，但无法正确查看）....

如果有不清楚的地方请在评论中写给我...

如何为以下内容添加特异性：

我想要类似的东西：

两个嵌套的 div，外部由 ID 标识，内部由类标识：

假设我们对类和 ID 都有规则

根据我的理解，这两条规则都适用于文本，因此具有更高特异性（#theID）的规则应该获胜。

但是由于某种原因，班级规则获胜，文本呈现绿色。

这是为什么？

我已经知道如何计算 CSS 的选择器特异性（规范中提到的 a/b/c/d）。:not()但是，我无法确定如何为伪类计算它。请参见以下示例：

假设它们都适用于一个元素，这两个是否应该计算为（0011），因此它们应该按照出现的顺序排列？或者是否应该:not()进一步单独计算伪类中的选择器，取决于哪个匹配，作为第二步来确定一个优先于另一个？

我有以下标记：

我的样式是这样定义的：

在我的页面上，链接显示默认光标（箭头），并且a.pointer在 IE10 控制台和萤火虫中显示样式。

我的困惑是，当pointer类直接应用于锚元素时，它不应该覆盖从.breadcrumbs span a匹配中挑选的那个吗？

我有几个页面和一个外部样式表。CSS 文件具有以下内容：

根据我一直在学习的内容，主体形式会更具体，并且应该在主体内部的所有类型形式元素周围显示双线边框。

但是，在测试中，除非我将它移到 CSS body {} 选择器上方，这意味着 CSS 文件中的 body 选择器覆盖了body form。

我究竟做错了什么？

问候：我花了几天时间试图找到一个工具，可以显示浏览器计算的每个 CSS 规则的确切 CSS 特异性数。我已经查看了许多在线资源，包括查看 CSS 特异性的工具——那里的链接讨论了被覆盖的类等，但我想查看应用特定 CSS 规则时浏览器计算和使用的确切特异性数。

为什么我需要查看准确的 CSS 特异性计算？
我无法克服浏览器使用基于该规则与元素的接近程度的 CSS 规则的某个问题，但我在它之前定义了另一个规则，该规则应该比浏览器应用的规则具有更高的特异性。我没有可以用来演示使用 jsfiddle 的简单代码，而且我尝试调试的代码太复杂而无法包含在小提琴中。

几乎每次搜索都会导致人们指向某种“CSS 特异性规则”或“理解 CSS 特异性”链接。我了解 CSS 特异性应该如何工作，广泛使用 Firebug 和 Chrome 开发人员工具，并且非常了解指向理解特异性规则的链接。我的任务是尝试了解浏览器引擎在将一个 CSS 规则应用于另一个 CSS 规则时的想法！而且由于它已经计算了这个信息来决定哪个规则覆盖其他规则，所以它应该是可访问的信息，但我不知道如何？

我面临的问题的一个非常基本的例子：

或者它可以被编码成这样......（在最终结果中没有任何不同。）

HTML结构看起来像这样......

我认为调试此问题的最佳方法是查看浏览器的 CSS 特异性计算是什么，而不是我不得不假设某些规则并每次手动计算它。此外，浏览器在应用它时已经计算过了，所以我一直在寻找工具来查看浏览器对这些特异性规则的计算，但在 Firebug 或 Chrome 检查器中找不到任何方法。

有没有其他人知道这一点，有人能指出我可能存在的工具吗？我非常感谢您的帮助。谢谢！

编辑： 我试图拼凑一个小提琴，看看我是否可以重现“我正在努力解决的问题”来演示。我想，我很幸运 - 请参阅http://jsfiddle.net/smallworld/abvHC/1/。这个小提琴中的问题仍然太简单了，但有点代表我的挑战，其中类是动态分配的，所以我无法预测确切的顺序。小提琴中的示例 3 在某种程度上是我需要查看计算出的特异性的代表性案例。无论如何，我认为能够将您计算的数字与浏览器的计算进行比较会很棒。

另一个编辑： 虽然我仍然没有答案来查看浏览器对给定元素的特异性得分，但我认为 Faust 和其他人已经引导我找到了解决我所面临的原始问题的可能解决方案。请参阅下面的评论线程。考虑到这个问题是关于能够查看浏览器的特异性分数，我不妨让这个问题保持开放——很可能的答案是目前没有可用的工具可以这样做。

我的问题应该很明确。出于某种原因，我今天无法绕开它。

我正在制作一个结构像这样的菜单

我正在尝试使用以下 css 选择器定位登录链接：

选择器正在工作，但是以下选择器占据 css 主导地位，并覆盖了上述选择器：

我完全感到困惑。为什么第二个选择器会优先于第一个选择器？你们会如何建议我针对上述“a”元素？

我在 jQuery UI 小部件中大量工作，并且由于我需要解决的疏忽，主题化变得越来越困难。

考虑这个问题：

然后这个jquery

我希望 ui-state-error 对嵌套 div 很重要。这是伪代码，但我发现在容器具有 css 交换并且子级（基本上）忽略它的情况下发生这种情况的大量示例。更糟糕的是：如果我希望能够在 jQuery 中覆盖说“backgroundcolor=ui-state-error:background-color 知道 100%，这一切都不会崩溃，因为我不“知道”必然地，该背景对于所讨论的元素是重要的。

这是一个很好的例子http://jsfiddle.net/WCuYH/1/

编辑我将建议关闭这个问题，因为没有任何尝试回答，与原始帖子的本质相差太多

我对我的样式表感到非常困惑。我的工作表中有很多特定的链接样式，由于某种原因，当我使用 Chrome 开发工具或 Firebug 检查页面时，其中一个会随机被其他内容覆盖。在摆弄 !important 案例并意识到它们正在慢慢使我的代码变得绝对糟糕之后，我已经将它们全部删除，并试图弄清楚如何组织我的链接样式以在正确的位置获得所有正确的样式，而无需它们被被覆盖。

基本上我有这样的：

.newlinks 正在从“.abclink a”中获得“一些样式”。如果该类具有特定名称而不是像“p”之类的东西，我真的很困惑为什么会发生这种情况。任何解释都会有所帮助！谢谢！

编辑：这是html的顺序

如有必要，我可以发布更长的代码，我只是认为这可能是我的订单或措辞或其他方面的普遍问题。

编辑：这里是 jfiddle 中的相关 css/html

http://jsfiddle.net/Ub6er/

正如您在 jsfiddle 中看到的那样，“underrighttext”中的链接正在从 .dl 获取样式:(