CSS Selector'Precedence'查询

Question

我很好奇，如果有以下片段之间的功能区别是什么？我不确定'，'如何影响陈述。是#page＆gt;影响第一个链接？例如？

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

和

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

Answer 1

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

#page >

后，,不会影响选择器

此：

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

可表达为：

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

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

Answer 2

  

CSS Selectors - 5. Groups of selectors

     

以逗号分隔的选择器列表表示列表中每个选择器选择的所有元素的并集。

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

因此如下：

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

等同于：

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

您必须对整个选择器进行分组才能产生相同的结果：

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

---

在一个有点相关的旁注中，如果您使用的是CSS预处理器，例如LESS，则可以使用：

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

哪个会编译成以下内容：

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