我可以使用一些帮助来获得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编码技术.

我会将您的选择器称为上下文选择器,因为您只将样式应用于元素上下文中的访问链接span.logout(技术上,空格分隔span.logout并a:visited称为后代组合子).