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，因为它只有一个 class 选择器作为复杂选择器的一部分，而 .myrow > td 选择器的特异性为 011，因为它有一个 class 和一个元素类型选择器作为复杂选择器的一部分。

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

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

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

如果 myrow 是一个特定的主题 class 并且您希望 .ui-state-error 元素的颜色为红色而不考虑主题，那么您可以像下面这样更改选择器：

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

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

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

简单来说，下面是特异性的计算方法：

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

最后的特异性是a + b + c（连接而不是求和）。

Answer 2

您必须更加具体，因为这两个规则都适用于您的 td。你可以这样做：

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

这是Updated Fiddle

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

CSS style precedence not working as expected

html

css

css-specificity