如何选择性应用存在元素引用重叠的两个CSS样式块到指定表格

解决方案 #

首先给第二个table标签添加自定义类，比如命名为target-table，不需要修改内部的tr、td标签：

<!-- 第一个表格不加类，保持无样式 -->
<table>
  <tr>
  <td>This is one table, no formatting</td>
  <tr>
</table>

<!-- 第二个表格加自定义类 -->
<table class="target-table">
  <tr>
  <td>This is another table, to which I want to apply formatting.</td>
  <tr>
</table>

随后用后代选择器修改CSS规则，把样式作用范围限定在带.target-table类的表格及其内部元素上即可：

/* 仅匹配带target-table类的表格、以及它内部的th和td */
table.target-table, table.target-table th, table.target-table td {
  border: 1px solid white;
  border-collapse: collapse;
}
/* 仅匹配带target-table类的表格内部的th和td */
table.target-table th, table.target-table td {
  background-color: #96D4D4;
}

尝试1失效的原因 #

你之前把样式直接加给了包裹div的.betterformat类，但border-collapse是表格专属属性，加在div上不会传递给内部的table，边框、背景色也只会作用在div本身，不会自动继承给内部的th、td元素。如果要沿用包裹div的方案，同样可以用后代选择器修改CSS：

.betterformat table, .betterformat th, .betterformat td {
  border: 1px solid white;
  border-collapse: collapse;
}
.betterformat th, .betterformat td {
  background-color: #96D4D4;
}

相关规则说明 #

你提到的重叠选择器作用逻辑、类与选择器交互、ID用法核心规则如下：

• 当多个选择器同时匹配同一个元素时，按优先级高低决定生效样式：ID选择器 > 类选择器 > 标签选择器，同优先级下写在后面的样式会覆盖前面的
• 后代选择器可以限定样式仅作用在指定父元素的内部子元素上，不需要给每个子元素单独加类
• ID选择器要求页面内唯一，一个ID只能对应一个元素，优先级高于类，适合标记唯一功能的元素；类可以给多个元素复用，适合批量定义同类样式的元素

内容的提问来源于stack exchange，提问作者AdmosJagashvili