CSS选择器优先级问题：部分样式生效部分不生效原因咨询

核心原因 #

你遇到的是标准的CSS特异性（权重）计算规则导致的样式覆盖问题，具体逻辑如下：

1. 两个选择器的权重对比 #

CSS选择器权重按层级计算，优先级从高到低为：内联样式 > ID选择器 > 类/伪类/属性选择器 > 标签选择器，同层级内计数越多权重越高：

• 基础样式的选择器 nav ul li a 包含4个标签选择器，权重为 0,0,0,4
• 初始媒体查询的选择器 nav ul a 包含3个标签选择器，权重为 0,0,0,3
  基础样式的权重明显更高，优先级更强。

2. 部分属性生效的逻辑 #

CSS样式覆盖是按单个属性独立判断的，不是整条规则要么全生效要么全失效：

• background-color：你的基础样式规则里从未定义过该属性，不存在被高优先级规则覆盖的情况，所以即使媒体查询选择器权重更低，该属性也能正常生效
• font-size、margin：基础样式规则里已经明确定义了这两个属性，由于基础样式权重更高，媒体查询里的同名属性会被直接覆盖，因此不会生效

3. 相同选择器全生效的逻辑 #

当两个选择器的权重完全一致时，CSS遵循「后定义优先」的规则：写在后面的规则会覆盖前面规则的同名属性。媒体查询代码通常写在基础样式之后，所以相同选择器下，媒体查询的所有属性都会覆盖前面的基础样式属性，自然全部生效。

补充说明 #

如果不想写完全相同长度的选择器，也可以通过提权的方式实现效果，比如给选择器添加无匹配逻辑影响的伪类（如:nth-child(n)）、给目标元素加自定义类等，都可以提高选择器权重。

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