如何在同一<tr>中让.info标签排除.section类的CSS样式？

嘿，这个问题其实挺常见的，咱们得先区分两种不同的场景，再对应解决：

场景1：.section的样式是继承性CSS属性（比如文字颜色、字体大小） #

如果你的.section样式是像下面这样的继承性属性，子元素.info会自动继承这些样式：

.section {
  color: #ff0000;
  font-family: Arial, sans-serif;
}

这时候你只需要给.info单独设置对应的属性，覆盖继承来的样式就行：

.info {
  /* 要么重置为浏览器默认值 */
  color: initial;
  /* 要么直接设置你想要的样式 */
  font-family: "Microsoft YaHei", sans-serif;
}

如果优先级不够（比如.section的选择器更具体），可以把.info的选择器写得更明确：

.section td.info {
  color: #333;
}

场景2：.section直接给子td设置了样式 #

如果你的.section是通过子选择器直接作用于td的，比如：

.section td {
  border: 1px solid #ccc;
  padding: 8px;
}

这时候要让.info的td避开这个样式，就需要用更具体的选择器来覆盖：

.section td.info {
  /* 重置掉不需要的样式 */
  border: none;
  padding: 10px; /* 或者你自定义的内边距 */
}

这个选择器的优先级比.section td更高（多了一个类选择器），所以会优先生效。

终极重置（谨慎使用） #

如果你想一次性让.info摆脱所有来自.section的影响，可以用all属性，但它会重置所有CSS属性（包括非继承的），之后你需要重新写.info的样式：

.info {
  all: initial;
  /* 在这里重新设置你需要的样式 */
  color: #666;
  line-height: 1.5;
}

核心思路就是：利用CSS选择器的优先级规则，或者重置继承属性，来让.info的样式不受.section的影响～

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