CSS Selector 'Precedence‘查询

Question

我很好奇，如果有的话，下面的代码段之间的功能区别是什么？我不知道“，”如何影响陈述。#页面>会影响第一个示例中的链接吗？

#page > a:visited, a:link{}

和

#page > a:link{}
#page > a:visited{}

Answer 1

CSS选择器- 5.选择器组 逗号分隔的选择器列表表示由列表中的每个选择器选择的所有元素的联合。

换句话说，#page > a:visited, a:link代表两个独立的、无关的选择器。

因此，以下几点：

#page > a:visited,
a:link {}

不等于：

#page > a:link {}
#page > a:visited {}

为了获得相同的结果，必须对整个选择器进行分组：

#page > a:link,
#page > a:visited {}

另外，如果您使用的是CSS预处理器(如较少 )，则可以使用：

#page > a {
    &:visited,
    &:link {
        color: red;
    }
}

它将汇编成以下内容：

#page > a:visited,
#page > a:link {
    color: red;
}

Answer 2

,分离了两个不同的选择器，因此它们具有相同的样式定义。

不，#page >不影响,之后的选择器。

这是：

#page > a:link{}
#page > a:visited{}

可表示为：

#page > a:link,#page > a:visited{}

如果他们有完全相同的风格