缩短逗号分隔CSS选择器

也许这个问题的标题是模棱两可的，我真正的意思是：缩短逗号分隔CSS选择器

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

是否有在CSS的两个元素的捷径吗？所以CSS选择器可以缩短

来源

2010-09-04 Michael Mao

当然。如果你给他们各自的班级/编号名称。但那是不必要的。你的代码是完全可以接受的，因为CSS 是级联样式表，规则基本上是级联的。

来源

2010-09-04 05:37:10

当我键入/粘贴的东西“redun dant“我一直认为我必须以错误的方式来做：（ – 2010-09-04 05:40:40

）不仅类是不必要的，但它们不工作，因为它们不能替代伪类。（虽然我只是对你的答案进行了友好的扩展。） – BoltClock 2010-09-04 05:40:46

@Michael Mao：提问是一个很好的特质。但是，不要自动承担错误的方式。如果它有效，那就使用它。 *这应该采取一粒盐* – 2010-09-04 05:43:29

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

如果你的服务器运行Ruby和你不介意拿起一个服务器端的“扩展”到标准的CSS语法，LESS提供嵌套的规则，所以你可以做这样的事情：

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

OK，我不知道这会做出什么区别，但我敢肯定它会通过不同的浏览器进行处理：

#footer_list li a { 
    /* Styles */ 
}

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

来源

2010-09-04 05:38:26 BoltClock

哇！这是我不知道的......我会检查这与我的托管服务器，看看我能否做到这一点:) – 2010-09-04 05:42:29

@迈克尔毛还有http://sass-lang.com/ – 2010-09-04 05:44:28

@迈克尔毛：我再次更新了我的答案。看看最后（不需要）选择器是否适合你。 – BoltClock 2010-09-04 05:44:32

您是否在#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

来源

2010-09-04 20:15:57 robertc

缩短逗号分隔CSS选择器

回答

相关问题