如何编写父元素带ID或class时针对子元素的CSS选择器

你需要使用CSS的后代选择器实现需求，规则为：父元素选择器写在前方，子元素选择器写在后方，二者用空格分隔即可。

针对你要求的「所有class为ABC的table内的th元素文字设为红色」的场景，CSS代码如下：

table.ABC th {
  color: red;
}

写法说明 #

• table.ABC是父元素选择器，只会匹配带有ABC类的<table>标签
• 空格加th表示匹配上述选中的table内部所有的<th>后代元素，无论嵌套层级多深都会命中。如果你需要仅匹配直接子层级的th，可以写为table.ABC > tr > th，你的示例场景用后代选择器就足够使用。

效果验证 #

应用上述CSS规则后：

• 带class="ABC"的table内的th会显示为红色，同表格内的td不受影响保持黑色
• 没有加ABC类的普通table内的th也保持黑色，完全符合你的需求。

扩展用法 #

如果是父元素带ID的场景逻辑完全一致，比如要选中ID为test的父元素内部的span标签，直接写#test span即可。

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