缩短逗号分隔的 CSS 选择器答案

【问题标题】：Shorten the comma separated CSS selectors缩短逗号分隔的 CSS 选择器
【发布时间】：2010-09-04 05:34:00
【问题描述】：

也许这个问题的标题是模棱两可的，我真正的意思是：

#footer_list li a:link, #footer_list li a:visited
{
    blah balh blah
}

在 CSS 中是否有两个元素的快捷方式？所以 CSS 选择器可以缩短

【问题讨论】：

标签： css css-selectors

【解决方案1】：

当然。如果你给他们每个人各自的类/ID名称。但那是不必要的。您拥有的代码是完全可以接受的，因为 CSS is 层叠样式表，规则本质上是层叠的。

【讨论】：

每当我输入/粘贴一些“多余”的东西时，我总是认为我必须以错误的方式进行操作:(
类不仅是不必要的，而且它们也不起作用，因为它们不能替代伪类。（不过，我只是在这里对您的答案进行了友好的扩展。）
@Michael Mao：质疑事物是一个很好的特质。但是，不要自动假设它是错误的方式。如果它有效，然后使用它。 这应该是一粒盐

【解决方案2】：

您的代码没有问题。我一直在用这样的选择器来设计我的网站，它并没有打扰我或浏览器。

如果您的服务器运行 Ruby，并且您不介意使用标准 CSS 语法的服务器端“扩展”，LESS 提供嵌套规则，因此您可以执行以下操作：

#footer_list li {
    a:link {
        /* Styles for normal links */
    }
    a:visited {
        /* Styles for visited links */
    }
}

好的，我不确定这会产生什么不同，但我确信浏览器会以不同的方式对待它：

#footer_list li a {
    /* Styles */
}

然后，您可以在其下方放置其他带有类的 a 选择器或 a:hover 或 a:active，它们将在适用时工作。

【讨论】：

哇！那是我不知道的事情......我会用我的托管服务器检查一下，看看我是否可以在那里做到这一点:)
@Michael Mao：我再次更新了我的答案。看看最后一个（不需要 LESS）选择器是否适合你。
哦，美味的嵌套 CSS 选择器。我不明白为什么当 CSS 设计为样式 (X)HTML 时没有嵌套，这是有史以来最疯狂的嵌套。

【解决方案3】：

#footer_list 中是否有不在li 元素中的链接？您的页脚中还有其他列表吗？

我想象你的标记中有这样的东西：

<div id="footer">
    <p>&copy; me 2010</p>
    <ul id="footer_list">
        <li><a href="/home">Home</a></li>
        <li><a href="/contact">Contact</a></li>
        <li>....
    </ul>
    <p>Some other text...</p>
</div>

在这种情况下，您的规则只需要：

#footer a:link, #footer a:visited

如果您有（或以后可能）在 ul 之外有您想要不同样式的链接，您可以这样做：

#footer_list a:link, #footer_list a:visited

【讨论】：