CSS 选择器“优先级”查询答案

【问题标题】：CSS Selector 'Precedence' QueryCSS 选择器“优先级”查询
【发布时间】：2015-03-22 06:27:33
【问题描述】：

我很好奇，下面的sn-ps有什么功能区别，如果有的话？我不确定“，”如何影响陈述。 #page > 是否会影响第一个示例中的链接？

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

和

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

【问题讨论】：

【解决方案1】：

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;
}

【讨论】：

【解决方案2】：

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

没有#page >不影响,之后的选择器

这个：

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

可以表示为：

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

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

【讨论】：