Question

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

出现在页面正文中的链接将始终具有蓝色悬停（该部分使用“ 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中的元素时，这些样式未被识别（可能基于如何“展开”的方式有所不同）。我是CSS的新手，所以我有一种直觉，我误解了它应该如何工作。

什么是使“未滚动”样式仅对使用“ Header-linkColors”类的链接生效的正确方法？

Answer 1

您应该发布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。

CSS：代码中设置的样式类组合与用户操作所应用的问题有关，想限制子类

1 个答案: