Ng-cli：组件本地样式未覆盖全局样式问题

这是典型的CSS继承与优先级问题，我来帮你拆解并给出解决方案：

首先，你全局设置的div[class^="col-"] { text-align: center; }是属性选择器，它会让所有类名以col-开头的div内部元素继承text-align: center样式。你在组件本地写的h5 { text-align: left; }是元素选择器，理论上子元素自身样式应该覆盖继承样式，但没生效大概率是以下两种情况之一：

1. 组件样式被作用域隔离（如Vue的scoped、React CSS Modules） #

如果你的组件CSS用了作用域隔离（比如Vue中给<style>加了scoped属性），本地的h5选择器会被编译成带唯一属性后缀的形式（比如h5[data-v-abc123]）。虽然父元素是全局的，但子元素h5属于当前组件，scoped样式本应命中它，不过偶尔会因为编译顺序或嵌套结构出现异常。

2. 本地样式优先级被其他全局样式压制 #

可能存在其他全局h5样式（比如h5 { text-align: center; }），它和你本地h5选择器优先级相同，但因加载顺序更靠后而覆盖了你的样式；或是本地样式因作用域规则，优先级计算后不如预期。

靠谱解决方案（按推荐程度排序） #

• 方法一：增强本地选择器优先级
  借助父元素类名提升选择器权重，确保能覆盖继承样式：

  .col-3 h5 {
    text-align: left;
  }
  

  这个选择器的优先级从1（元素选择器）提升到11（类选择器+元素选择器），完全能压制继承来的样式。

• 方法二：给h5添加专属类名
  修改HTML结构：

  <div class="col-3">
    <h5 class="count-heading">counts</h5>
  </div>
  

  本地CSS对应写：

  .count-heading {
    text-align: left;
  }
  

  类选择器优先级（10）高于元素选择器，同时更语义化，方便后续维护。

• 方法三：使用!important（万不得已再用）
  如果你临时快速解决问题，或者找不到冲突样式来源，可以用：

  h5 {
    text-align: left !important;
  }
  

  它会强制覆盖所有其他样式，但滥用会导致样式维护难度飙升，所以尽量避免。

最后，你可以在Chrome开发者工具的Elements面板查看h5元素的Styles标签，看哪个样式处于生效状态（被划掉的是已覆盖的），找到冲突样式的来源，就能更精准地解决问题啦！

内容的提问来源于stack exchange，提问作者The Head Rush