Question

我有两种风格，每种风格都在单独的第三方控制中声明，它们不能很好地协同工作，我甚至不确定为什么会这样 - 最终 - 如何让它们按照我的意愿工作。

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＆amp;简化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

CSS样式优先级无法按预期工作

2 个答案: