CSS 选择器 'Precedence' 查询

Question

我很好奇，如果有的话，以下代码片段之间的功能区别是什么？我不确定 ',' 是如何影响语句的。 #page > 是否影响第一个示例中的 link？

#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

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

换句话说，#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;
}

CSS 选择器 'Precedence' 查询

CSS Selector 'Precedence' Query

css

css-selectors