如何不使用!important解决CSS类选择器样式被ID选择器覆盖问题

现有HTML结构：

<div id="stage">
     <div class="ticker universal">
    …
     </div>
</div>

配套初始CSS：

#stage {
    position: absolute
}

.ticker.universal { 	        
    position: relative;
}

实际表现：浏览器控制台检查.ticker.universal元素时，写的position: relative显示删除线、不生效，加!important可以强制生效，但需要不依赖!important的解决方法。

别搞错基本规则：position不属于CSS可继承属性，父元素#stage上设置的position: absolute只会作用在父节点本身，根本不会传递、也不可能覆盖子元素的同名position属性。
你看到子元素的relative被划掉，本质是有其他优先级更高、且命中了.ticker.universal的CSS规则，给这个元素设置了其他position值，你误判了覆盖样式的来源。
CSS选择器权重从高到低计算：

• 行内样式：权重1000
• 单个ID选择器：权重100
• 单个类/属性/伪类选择器：权重10
• 单个元素/伪元素选择器：权重1
  你写的.ticker.universal是两个类选择器拼的，总权重只有20，只要存在其他命中该元素、权重高于20的规则（比如很常见的#stage div权重就是100+1=101，或者其他带ID的子元素选择器），自然会覆盖你写的类选择器样式。

按推荐度从高到低排列：

• 先找对真正的覆盖源：打开浏览器开发者工具Elements面板，选中.ticker.universal元素，看右侧Styles栏里到底是哪条规则给这个元素设了position、把你写的relative划掉了，直接改那条规则的逻辑，去掉给这个元素加的非预期position属性，这是最干净、没有任何副作用的根治方法。
• 提升目标规则的选择器权重：如果不方便改原有高优先级规则，直接把.ticker.universal的选择器改成带父级ID的形式，把权重拉到比覆盖规则高就行。比如改成#stage .ticker.universal，此时权重是100+10+10=120，能覆盖绝大多数常规的子元素选择器规则，代码示例：

#stage .ticker.universal {
    position: relative;
}

• 给目标元素加专属ID：给.ticker.universal设一个唯一ID，直接用ID选择器写样式，单ID选择器权重100，能覆盖所有纯类、元素组合的低权重规则，示例：

<div id="stage">
     <div id="marqueeTicker" class="ticker universal">
    …
     </div>
</div>

#marqueeTicker {
    position: relative;
}

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