html - CSS 样式优先级未按预期工作

Question

我有两种样式，每种样式都在其单独的第 3 方控件中声明，但它们不能很好地协同工作，我什至不确定为什么会这样——以及最终——如何让它们按我想要的方式工作。

HTML:

<table>
  <tr class="myrow">
    <td>normal cell</td>
    <td class="ui-state-error">error cell</td>
  </tr>
</table>

CSS:

.myrow>td {  /* declared in the grid component */
  background-color: #88f;
}
.ui-state-error {  /* declared in jQuery UI */
  background-color: #f00;
}

HTML 和 CSS 都经过简化以显示确切的错误。 Here's the fiddle .

这里的最终结果是两个单元格都显示蓝色背景 (FF 46.0)。

但是，我希望 .ui-state-error 更具体，因为它直接应用于有问题的单元格而不是 .myrow>td 规则乍一看似乎更笼统。

无论如何，浏览器决定应用 .myrow>td CSS，我想让它应用 .ui-state-error。

考虑到 CSS 样式本身不在我的控制之下，我该怎么做？

Answer 1

您的两个规则都直接应用于单元格 - 一个是通过 class ，另一个是通过元素类型。由于具有元素类型的选择器附加了另一个 class 选择器，因此它具有更多的特异性，因此获胜。

.ui-state-error 选择器的特异性是 010 因为它只有一个类选择器作为复杂选择器的一部分，而 .myrow > td 选择器的特异性是 011，因为它有一个类和一个元素类型选择器作为复杂选择器的一部分。

您可以像下面给出的那样更改选择器，使错误 td 具有红色背景。

.myrow > .ui-state-error {
  background-color: #f00;
}

像上面那样更改选择器将不会覆盖所有其他样式。它将仅覆盖特异性低于 010 的选择器，并且仅适用于具有 class='ui-state-error 且其祖先具有 class='myrow' 的元素.

如果 myrow 是主题特定类，并且您希望 .ui-state-error 元素无论主题如何都为红色，那么您可以更改选择器如下所示:

tr > .ui-state-error {
  background-color: #f00;
}

这也具有 011 的特异性，并且会覆盖 .myrow > td。

---

https://specificity.keegan.st/ 提供了特异性计算器在您完全熟悉特异性计算之前，您会发现它非常方便和有用。

简单来说，下面是特异性的计算方式:

• 计算作为完整选择器一部分的 ID 选择器的总数。将此作为a
• 计算作为完整选择器一部分的类、属性和伪类选择器的总数。将此作为b。
• 计算作为完整选择器一部分的元素类型和伪元素选择器的总数。将此作为c。

最终的特异性是a + b + c(连接而不是求和)。