Angular组件CSS样式不生效求助：done类文本无删除线效果

你遇到的问题是样式优先级被覆盖了：
从代码里的col-xs-12能看出你用了Bootstrap框架，它对<ol>下的<li>元素有默认样式定义，而你写的.done类选择器优先级比Bootstrap的选择器低，所以即使浏览器能检测到样式已加载，实际渲染时也会被Bootstrap的样式覆盖，导致删除线不显示。

解决方法 #

1. 提升选择器优先级（推荐） #

修改app.component.css里的选择器，让它更具体：

ol li.done {
  text-decoration: line-through;
}

这个选择器的优先级高于Bootstrap默认的ol li规则，能确保样式生效。

2. 临时用!important（不推荐） #

如果不想调整选择器，也可以加!important强制生效，但这种写法会打乱样式的层叠逻辑，尽量少用：

.done {
  text-decoration: line-through !important;
}

额外检查 #

要是上述方法没用，再确认Angular的视图封装：
默认的Emulated封装会给组件样式加专属属性，不过你说浏览器能看到样式加载，所以这个概率很低。真要排查的话，可以在@Component装饰器里加encapsulation: ViewEncapsulation.None（注意这会让组件样式变成全局的，要小心冲突）。

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