css - CSS:代码中设置的样式类组合与用户操作所应用的问题，想要限制子类

我有两种类型的样式适用于链接：

页面正文中出现的链接将始终具有蓝色悬停（该部分使用“ linkColors”类，例如<p class='contactInfo'>）
标头中显示的链接具有不同的背景颜色：页面加载时，它们将从黄色悬停开始，然后当用户向下滚动（背景消失）时，我们希望蓝色悬停与其他悬停一样。（本节使用“ Header-linkColors”类，并且为不同的颜色提供了“未滚动”子类）。我有JavaScript，可以根据用户是否滚动来添加/删除“未滚动”类。

我的样式表具有以下内容：

.linkColors a:hover,
.linkColors a:focus {
  color: blue !important;
  text-decoration: none !important;
}

.Header-linkColors a:hover,
.Header-linkColors a:focus {
  color: blue !important;
  text-decoration: none;
}

  .unscrolled a:hover,
  .unscrolled a:focus {
    color: yellow !important;
    text-decoration: none;
  }

我将类名应用于段落，例如<p class='contactInfo'>，并且如上所述，我有一个javascript也将基于用户行为的“未滚动”类应用于顶部节点：<html class='unscrolled'>.

我希望仅将“ unscrolled”类应用于添加到.Header-linkColors类而不是linkColors类的元素中。但是，使用上面的代码，即使对于使用“ linkColors”类的部分中的链接，“未滚动”子类也将生效（指向内容的顶部，在任何滚动之前可见）：它们以黄色悬停开头，仅使用蓝色仅在滚动后才悬停。从浏览器检查元素，它具有类“ linkColors”和“未滚动”类。

在另一种尝试中，我使用自己的悬停颜色明确定义了“ .Header-linkColors .unscrolled”和“ .linkColors .unscrolled”，但是当我检查UI中的元素时，这些样式无法被识别（可能基于'unscrolled'的方式） '的应用方式有所不同）。我是CSS新手，所以我有一种直觉，我误解了它应该如何工作。

保持“展开式”样式仅对使用“ Header-linkColors”类的链接生效的正确方法是什么？

最佳答案

您应该发布您的html代码；文档的结构在CSS中很重要。

我想发生了什么：空间是CSS中的运算符；这意味着您正在与选择器匹配的元素中进行选择。通过使用它（.class1 .class2），您可以在具有第一类的元素中选择具有第二类的元素。通过省略它（.class1.class2），可以选择具有两个类的元素。

.Header-linkColors.unscrolled a:hover,
.Header-linkColors.unscrolled a:focus {
  color: yellow !important;
  text-decoration: none;
}

但是我可能会理解您的html错误：例如，如果<a>元素是所有类的元素，则您需要element.class1.class2:pseudoclass。