如何让我的 TD 中定义的类优先于为 TD 定义的一般类？答案

【问题标题】：How do I get my class defined in my TD to take precedence over the general class defined for TDs?如何让我的 TD 中定义的类优先于为 TD 定义的一般类？
【发布时间】：2017-06-06 13:32:13
【问题描述】：

我有以下 HTML ...

#searchResults td {
		padding: 1px;
		word-break: break-word;
	}
	
	.noBreaks {
		word-break: normal;
	}

<td class="noBreaks" align="center">MYWORD</td>

然而，我的“noBreaks”课程似乎被“#searchResults td”课程取消了。我希望“noBreaks”类优先（也就是说，尊重其规则而不是其他类）。如何使用该类而不是“searchResults td”？

【问题讨论】：

F12 工具怎么说？

标签： html css class html-table

【解决方案1】：

使用#searchResults .noBreaks。在 CSS 中带有标签名称的 ID 比单独的类名称创建更高的特异性。这是一些关于 CSS 特异性的文档https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【讨论】：

【解决方案2】：

当你在 CSS 中引用一个元素时，你命名的父元素越多，特异性就越大。不一定有一个 id 覆盖一个类；尽管如果我们谈论的是相同的元素，那将是正确的。

给定：

<div id="searchResults">
  <table>
    <tr>
      <td class="noBreaks" align="center">MYWORD</td>
    </tr>
  </table>
</div>

此 CSS 将生成蓝色文本：

#searchResults {
    color: red;
}

.noBreaks {
    color: blue;
}

此 CSS 将生成红色文本：

#searchResults td {
    color: red;
}

.noBreaks {
    color: blue;
}

因此您可以在此处看到，特异性级别由您在 CSS 规则中使用的父选择器数量定义，而不一定是它们的类型（类与 id）。

【讨论】：