Chrome 114中CSS嵌套选择器对td失效的原因及用法咨询

你遇到的问题是CSS嵌套的解析规则导致的：

Chrome 114支持的CSS嵌套对选择器写法有明确要求：

• 当嵌套类选择器（比如.col-2）时，浏览器会自动在它和父选择器之间补上空格，解析成.editing .col-2，刚好匹配你的HTML结构，所以样式生效。
• 但如果直接嵌套标签选择器（比如td），浏览器会把它和父选择器直接拼在一起，变成.editingtd——这是个不存在的选择器，自然找不到对应的元素，样式就不生效了。

要让td的样式生效，只需在td前加上&（代表父选择器本身），明确表示是父元素的后代：

.editing {
    padding: 1em 1.5em;      
    & td {
        font-size: 11em;
    }
}

或者也可以直接在td前加空格，明确后代关系：

.editing {
    padding: 1em 1.5em;      
     td {
        font-size: 11em;
    }
}

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