html - 仅将 css 应用于直接子级

Question

我了解到 > 只会将 css 应用于直接子级。但是我无法在我的案例中使用它。

我有 html 作为

table[id="tbl"] div div > span {
  font-weight: bold
}

<table id="tbl">
  <tr>
    <td>
      <div>
        <div>
          <span>
          outer span
          <div>
          <span>
            inner span
          </span>
        </div>
        </span>
      </div>
      </div>
    </td>
  </tr>
</table>

我想把 outer span 加粗，所以我写了如下的 css

table[id="tbl"] div div > span {
    font-weight:bold
}

但我的两个跨度都以粗体显示。出于某种原因，我必须在不更改 html 的情况下使用 css 或 jQuery 来完成此操作。

Answer 1

内部元素继承了样式规则。因此，您需要覆盖内部元素。此外，只需使用 id 选择器而不是属性选择器。

#tbl div div > span {
    font-weight:bold;
}

#tbl div div > span span{
    font-weight:normal;
}