如何为指定div内的链接设置样式？SCSS正常样式未生效排查

看起来你遇到的是CSS优先级冲突的问题——你的.categories a选择器优先级不足以覆盖其他已经存在的链接样式，导致正常状态的颜色继承了父元素或全局样式，只有:hover状态因为没有被其他高优先级样式覆盖，所以生效了。

为什么会这样？ #

从你的HTML结构来看，.categories容器嵌套在.headers里，如果你的代码中存在类似.headers a、.news a这类选择器（或者全局的链接重置样式），它们的优先级和.categories a是相同的（都是「类选择器 + 元素选择器」，权重为 0,0,1,1）。如果这些样式在你的.categories样式之后加载，就会覆盖你设置的正常状态颜色。

另外，也有可能你之前对<a>标签做了color: inherit;的重置，这时候.categories的父元素颜色会被继承，但你的.categories a样式因为优先级不够，无法覆盖这个继承值。

解决方法 #

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

通过增加外层类选择器，提升.categories a的权重，确保它能覆盖其他同级优先级的样式：

.headers .categories a {
  color: #767676;
  text-decoration: underline;
}

.headers .categories a:hover {
  color: #767676; // 如果hover状态和正常状态一致，可以省略这行
  text-decoration: underline;
}

或者使用子选择器，精准选中.categories的直接子元素<a>，避免被嵌套的其他链接样式干扰：

.categories > a {
  color: #767676;
  text-decoration: underline;
}

.categories > a:hover {
  color: #767676;
}

2. 检查样式加载顺序 #

确保你的.categories相关样式是在全局链接样式、.headers a这类样式之后加载的。相同优先级的CSS规则，后加载的会覆盖先加载的。

3. 利用浏览器开发者工具排查 #

按F12打开开发者工具，选中.categories里的<a>标签，在「Styles」面板中查看生效的样式——被划掉的规则就是被覆盖的，你可以看到是哪条样式抢走了优先级，针对性调整即可。

4. 应急方案：使用!important（不推荐） #

如果暂时找不到冲突的样式，可以用!important强制生效，但不建议长期使用，因为它会破坏CSS的优先级规则，增加维护难度：

.categories a {
  color: #767676 !important;
  text-decoration: underline;
}

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