Drupal 8子主题CSS在Edge、IE11中被scaffolding.less覆盖，如何解决

嗨，这个问题我之前做Drupal 8项目时也踩过坑，咱们先搞清楚根源，再一步步解决：

你碰到的本质是CSS样式优先级/加载顺序的浏览器表现差异，为啥Chrome和Firefox正常，IE11和旧Edge不行？主要有两个可能：

1. 选择器特异性不足
   scaffolding.less里的链接样式大概率用了比你更具体的选择器（比如body a、.page-content a这类带父元素的选择器），而你的a, a:hover...是全局通用选择器，特异性更低。理论上不管浏览器，特异性高的样式都会覆盖低的，但Chrome/Firefox可能因为缓存或渲染优化，暂时“掩盖”了这个问题；而IE11和旧Edge对样式优先级的计算更严格，直接触发了覆盖逻辑。

2. 子主题样式加载顺序错误
   Drupal 8的主题依赖系统如果配置不对，你的子主题CSS可能会在scaffolding.less的样式之前加载。这种情况下，即使选择器特异性相同，后加载的scaffolding样式也会覆盖你的样式。Chrome/Firefox可能因为某些渲染机制让你的样式“生效”，但IE系浏览器严格遵循加载顺序。

1. 提升选择器特异性 #

把你的选择器写得和scaffolding.less里的目标选择器一样具体，甚至更精准一点：
比如如果scaffolding里用的是body a，那你就写：

body a, 
body a:hover, 
body a:active, 
body a:visited { 
  color: #f4512c; 
}

这样两者特异性相同，只要你的样式加载顺序不早于scaffolding，就能覆盖它的样式。

2. 修正Drupal主题库的依赖顺序 #

确保你的子主题CSS库正确依赖基础主题的scaffolding相关库，让Drupal保证你的样式在scaffolding之后加载：

• 打开子主题的your_subtheme.libraries.yml，给你的样式库加上依赖：

global-styling:
  css:
    theme:
      css/style.css: {}
  dependencies:
    - classy/base # 如果你的基础主题是Classy，换成对应基础主题的scaffolding库

• 然后在子主题的your_subtheme.info.yml里确认这个库被引用：

libraries:
  - your_subtheme/global-styling

3. 验证IE11兼容性（辅助小步骤） #

虽然你的选择器没问题，但IE11对某些CSS属性的继承处理有点特殊，可以临时加个双重声明验证优先级问题：

a, 
a:hover, 
a:active, 
a:visited { 
  color: #f4512c !important; /* 仅用于测试，确认是优先级问题后去掉 */
  color: #f4512c;
}

验证完成后，再换回前面的正规解决方法即可。

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