我可以使用一些帮助来获得CSS子类（？）

Question

我可以通过这个CSS获得一点帮助吗？在我的样式表中，我定义了锚色：

a:link {}
a:visited {}
a:hover {}

稍后在样式表中，我有一些定义为：

的范围内的锚点

span.logout {}
span.logout a:link, a:visited {}
span.logout a:hover {}

唯一的问题是，我在注销范围内的锚颜色会覆盖我的主要锚颜色。我很困惑为什么会这样。我认为只有“注销”范围内的锚点才会受到这个CSS的影响。

无论如何，如果有人可以帮忙解决这个问题，我将不胜感激。另外，我正确地使用术语CSS“子类”吗？

感谢您花时间阅读，并度过了美好的一天。 :-)

Answer 1

您的a:visited选择器独立，不受span.logout选择器限定，因为逗号将其分开。换句话说，就像你有两个这样的规则一样，使用相同的声明集：

span.logout a:link {}
a:visited {}

即使对于a:visited内的访问过的链接，这也会覆盖您之前的span.logout规则。

您需要在逗号后重复span.logout选择器，才能在span个元素中生效：

span.logout a:link, span.logout a:visited {}

CSS没有“子类”的概念，因为所有类都被视为相同，但你在这里使用似乎很好。我认为术语“子类”在OOCSS这样的东西中会有更明确的定义，但这只是一种CSS编码技术。

我会将您的选择器称为contextual selector，因为您只将样式应用于span.logout元素的上下文中的访问过的链接（技术上，空格分隔{ {1}}和span.logout被称为descendant combinator）。

Answer 2

您需要更改：

span.logout a:link, a:visited {}

为：

span.logout a:link, span.logout a:visited {}

逗号分隔选择器，因此所有a:visited链接都以第二组样式为目标