CSS选择器设置表格th样式时border-width不生效问题咨询

这组CSS表现差异是三个规则共同作用的结果，和选择器匹配逻辑无关：

1. CSS选择器特异性（优先级）规则：高权重选择器设置的样式会覆盖低权重选择器的同属性样式，同权重下后加载的样式覆盖先加载的。权重计算规则为：行内样式 > ID选择器计数 > 类/属性/伪类选择器计数 > 标签选择器计数，高位权重优先级绝对高于低位。
2. Markdown编辑器内置样式的层叠顺序：编辑器默认会给渲染出的表格th设置边框样式，使用的选择器通常为.markdown-body th，权重为「1个类选择器+1个标签选择器」（记为0,1,1），且样式通常在用户自定义CSS之后加载。
3. CSS属性继承差异：color、font-size、text-transform是可继承属性，父元素或祖先元素设置后，子元素默认继承生效；border-width是不可继承属性，必须直接选中目标元素设置，且会被同元素上更高/同等优先级的后加载样式覆盖。

CASE 1 生效原因 #

使用的选择器为.mytable tr th，权重计算：1个类选择器（.mytable）+ 2个标签选择器（tr、th），权重值为0,1,2，高于编辑器默认th边框规则的0,1,1，无论样式加载顺序如何，都能覆盖默认边框设置，因此border-width:0正常生效。

.mytable tr th {
    color: brown;
    font-size: 18px;
    text-transform: uppercase;
    border-width: 0px;
}

<table class="mytable">
  <tr>
    <th>TITLE</th>
    <th>DESCRIPTION</th>
  </tr>
</table>

CASE 2 边框不生效原因 #

使用的选择器为tr th，权重计算：2个标签选择器，权重值为0,0,2，远低于编辑器默认th边框规则的0,1,1，完全无法覆盖默认的边框设置，因此border-width不生效。
字体相关样式生效，是因为编辑器默认没有给th设置这几个属性，选择器匹配到th后直接设置的属性自然生效。

tr th {
    color: brown;
    font-size: 18px;
    text-transform: uppercase;
    border-width: 0px;
}

<table class="mytable">
  <tr>
    <th>TITLE</th>
    <th>DESCRIPTION</th>
  </tr>
</table>

CASE 3 边框不生效原因 #

使用的是逗号分隔的分组选择器，等效于两条完全独立的规则，逗号不会让后面的选择器继承前面的父级限制：

1. .mytable tr：匹配class为mytable的元素下的所有tr，设置的border-width作用在tr上，而默认边框是设置在th上的，tr的边框设置不会影响th；
2. th：匹配页面所有th元素，特异性仅为1个标签选择器，权重0,0,1，远低于默认样式权重，无法覆盖th的默认边框。

字体样式生效的原因：第一条规则匹配到tr，可继承的字体属性会向下传递给内部的th，且默认样式没有重设这类属性，因此生效。

/* 写法实际等效于以下两条独立规则 */
.mytable tr {
    color: brown;
    font-size: 18px;
    text-transform: uppercase;
    border-width: 0px;
}
th {
    color: brown;
    font-size: 18px;
    text-transform: uppercase;
    border-width: 0px;
}

<table class="mytable">
  <tr>
    <th>TITLE</th>
    <th>DESCRIPTION</th>
  </tr>
</table>

CASE 4 边框不生效原因 #

使用的选择器为.mytable th，权重计算：1个类选择器+1个标签选择器，权重值0,1,1，和编辑器默认th边框规则的权重完全相同。由于Markdown编辑器通常会在用户自定义样式之后加载内置渲染样式，同权重下默认边框规则会覆盖你写的border-width:0设置。
字体样式生效，同样是因为默认样式没有重设这几个属性，不存在同权重规则覆盖的问题，因此正常生效。

.mytable th {
    color: brown;
    font-size: 18px;
    text-transform: uppercase;
    border-width: 0px;
}

<table class="mytable">
  <tr>
    <th>TITLE</th>
    <th>DESCRIPTION</th>
  </tr>
</table>

网传「浏览器自动补全tbody导致选择器匹配失败」的解释是错误的，后代选择器不要求父子元素相邻，中间无论有多少层自动补全的元素（比如tbody、thead），都不会影响匹配结果。
如果需要让后三种写法的边框设置生效，只需要提升选择器优先级即可，比如给选择器多加一层类选择器，非必要场景不推荐使用!important强制覆盖。

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