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

Question

我有两种风格，每种风格都在其单独的 3rd 方控件中声明，它们不能很好地配合使用，我什至不确定为什么会这样 - 最终 - 如何让它们按我想要的方式工作。

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（连接而不是求和）。

Answer 2

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

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

这里是Updated Fiddle