如何让我的TD中定义的类优先于为TD定义的常规类？

Question

我有以下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”？

Answer 1

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

Answer 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）。