如何使用CSS选择表格直接子行 兼容有无tbody标签场景

首先明确一个HTML解析的默认规则：在标准HTML文档的渲染流程中，浏览器会自动给<table>下没有显式包裹的<tr>补全隐式<tbody>父节点，这种场景下table > tr本身就无法匹配元素，只有在XML/XHTML文档、或通过脚本手动将<tr>插入为<table>直接子节点的特殊场景下，才会出现<tr>直接作为<table>子元素的情况。

如果要同时覆盖「是直接子元素」和「是

• 现代浏览器（Chrome 105+、Firefox 113+、Safari 15.4+）可以使用CSS Selector Level 4的相对选择器语法，用:is()简化写法，无需重复书写前缀：

table :is(> tr, > tbody > tr) {
  background: blue;
}

这个写法和群组选择器效果完全一致：仅匹配<table>的直接子<tr>、<table>直接子<tbody>下的直接子<tr>，不会命中嵌套表格内的行——嵌套表格的<table>节点本身不是外层<table>的直接子元素，无法满足匹配规则，同时选择器优先级和原群组写法完全一致，没有优先级异常问题。

• 如果需要兼容老旧浏览器（包括IE全系列、2022年之前发布的浏览器版本），你认为“冗余”的群组选择器反而是最优解：

table > tr, table > tbody > tr {
  background: blue;
}

这种写法没有任何伪类运行时开销，渲染性能是所有方案中最高的，所谓的代码重复只是文本层面的冗余，完全不会影响实际运行效果，不需要刻意回避。

注意：不要使用table tr这类无限制的后代选择器，也不要尝试用多个:not()拼接复杂过滤逻辑，前者会误匹配所有层级嵌套表格的行，后者会大幅降低样式渲染性能，还容易出现匹配逻辑漏洞。

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

直接子的直接子元素」两种场景，同时避免误匹配嵌套表格内的行，可以按兼容性需求选择方案：