同一样式表中CSS ID样式被后代组合选择器覆盖原因求解

CSS样式优先级异常成因 #

CSS优先级按选择器总权重累加计算，并非只要包含ID选择器就一定优先级更高，具体规则和本次问题的计算逻辑如下：

• 权重计算标准：单个ID选择器计100分，单个标签选择器计1分，类、属性、伪类选择器计10分，行内样式计1000分，组合选择器的总权重为所有组成部分权重的和，总权重更高的样式优先生效。
• 本次涉及的两个选择器权重计算：
  • #body table：包含1个ID选择器+1个标签选择器，总权重为 100 + 1 = 101
  • #table：仅包含1个ID选择器，总权重为 100

因为101>100，所以#body table设置的红色背景优先级更高，最终table元素显示为红色。

如果需要蓝色背景生效，可以调整选择器提升权重，比如改为#body #table（总权重200，远高于前者），或者改为body #table（总权重1+100=101，和前者权重相同时，写在代码后侧的样式会覆盖靠前的样式）。

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