相同选择器的CSS优先级判定及跨服务器生效差异原因咨询

CSS特异性（优先级）判定规则 #

当多个样式作用于同一个元素时，浏览器会按照以下优先级从高到低的规则判断生效样式：

• 最高优先级：标记了!important的样式，会覆盖所有同元素的普通样式
• 行内样式：写在元素style属性内的样式，权重为1000
• ID选择器：使用#id定义的样式，权重为100
• 类选择器、属性选择器、伪类选择器：使用.class、[attr]、:hover等定义的样式，权重为10
• 标签选择器、伪元素选择器：使用div、::before等定义的样式，权重为1
• 通用选择器*、关系选择器（>、+、~）不参与权重计算

当两个样式的权重计算结果完全相同时，适用层叠顺序规则：后被浏览器解析加载的样式，会覆盖先加载的同优先级样式。

跨服务器样式生效差异的原因 #

你遇到的两台服务器生效样式不同，核心是两个CSS文件在不同环境下的加载解析顺序不一致，触发的可能原因包括：

• 两台服务器返回的HTML中，两个CSS对应的link标签引入顺序不同：如果服务器A的页面先引入Stylesheet2.css、后引入Stylesheet1.css，后者会覆盖前者的同优先级样式；如果服务器B的引入顺序相反，就会出现Stylesheet2.css生效的情况
• 服务器资源加载配置差异：如果某台服务器开启了CSS异步加载、或者对应CDN节点的响应速度不同，会导致两个CSS的实际解析顺序和HTML中定义的link顺序不一致
• 动态加载逻辑的执行时机差异：如果样式表是通过JavaScript动态插入到页面的，不同服务器的JS执行时机差异也会导致两个CSS的插入顺序不同，最终生效样式不同

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