CSS选择器有效性及优先级咨询：td .cssClass与tbody tr td .plusIcon

当然有效啦！这个选择器的作用是匹配所有<td>元素内部所有后代（不管嵌套多少层）中带有cssClass类名的元素。

举个实际的例子，假设你的HTML是这样：

<td>
  <span class="cssClass">我会被选中</span>
  <div>
    <p class="cssClass">我也会被选中哦</p>
  </div>
</td>

那td .cssClass就能精准选中里面的<span>和<p>。要是你只想匹配td的直接子元素，那就把空格换成>，写成td > .cssClass就行。

这种情况大概率是CSS优先级冲突或者你的选择器没匹配到正确的元素，咱一步步解决：

第一步：先检查元素结构是否匹配 #

先确认你的.plusIcon元素确实是在tbody > tr > td的内部，比如正确的结构应该是这样：

<tbody>
  <tr>
    <td>
      <i class="plusIcon">这是目标图标</i>
    </td>
  </tr>
</tbody>

如果.plusIcon是在td外面，或者嵌套层级不对，那tbody tr td .plusIcon自然找不到它。

第二步：解决优先级问题 #

如果结构没问题，那就是.plusIcon的优先级比你写的选择器高。CSS优先级的规则是：内联样式 > ID选择器 > 类/伪类选择器 > 元素选择器，同优先级下后写的样式会覆盖前写的。

给你几个靠谱的解决方法：

• 给选择器加权重：比如你的表格有个专属类data-table，那就写成.data-table tbody tr td .plusIcon，这样优先级就上去了
• 重复类选择器：写成tbody tr td .plusIcon.plusIcon，相当于把类选择器的权重翻倍（虽然有点小技巧，但很实用）
• 万不得已用!important：如果上面的方法都不行，再用这个（尽量少用，会让样式维护变麻烦）：

tbody tr td .plusIcon {
  color: #ff0000 !important; /* 示例样式，替换成你需要的 */
}

验证小技巧 #

打开浏览器开发者工具（按F12），选中.plusIcon元素，看“Styles”面板里你的tbody tr td .plusIcon是不是被划掉了。如果是，就说明优先级不够，按上面的方法调整就行。

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