Question

也许这个问题的标题含糊不清，我的意思是：

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

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

Answer 1

不确定。如果你给他们各自各自的类/ id名称。但那是不必要的。您拥有的代码是完全可以接受的，因为CSS 是层叠样式表，规则基本上是级联的。

Answer 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，并在适用的时候使用它们。

Answer 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

缩短逗号分隔的CSS选择器

3 个答案: