我有两种类型的样式可以应用于链接:
- 出现在页面正文中的链接将始终有蓝色悬停(该部分使用“linkColors”类，如
<p class='contactInfo'>) - 出现在标题中的链接具有不同的背景颜色:当页面加载时，它们将以黄色悬停开始，然后当用户向下滚动(背景消失)时，我们希望像其他链接一样为蓝色悬停。 (该部分使用“Header-linkColors”类，我们有不同颜色的“unscrolled”子类)。我有 javascript 添加/删除类"unscrolled"取决于用户是否已滚动。
我的样式表是这样的:
.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”，以及预期的“unscrolled”。
在另一次尝试中，我用自己的悬停颜色明确定义了“.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 .
关于CSS:代码中设置的样式类组合与用户操作应用的样式类组合存在问题，想要限制子类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51085463/