css选择器合并

Question

有没有办法合并这个选择器：

ul#social_footer li a:link,
ul#social_footer li a:visited {} 

我希望为两个锚状态选择具有ID #footer_navigate的ul的相同选择器。

这是唯一的方法吗？

ul#social_footer li a:link,
ul#social_footer li a:visited,
ul#footer_navigate li a:link,
ul#footer_navigate li a:visited {} 

Answer 1

您可以假设其中没有 想要影响的其他a元素，将其缩短为：

ul li a:link,
ul li a:visited {
    /* css */
}

这种方法确实存在这样的问题：您必须覆盖由同一选择器匹配的其他链接的给定样式。

我建议使用类来识别那些共享样式的链接：

ul.navigation li a.happyColors:link
ul.navigation li a.happyColors:visited {
    /* CSS */
}

显然，这需要编辑html以添加您选择使用的那些（或其他）类。

Answer 2

您可以在应该有两个选择器的所有标记ul上添加其他公共类。

在这种情况下，您只能使用此css：

ul.*commonClass* li a:link, ul.*commonClass* li a:visited {}

<ul id="social_footer" class="*commonClass*" >...</ul>
<ul id="footer_navigate" class="*commonClass*" >...</ul>

Answer 3

也许是这样的：

    ul#social_footer li a:link, ul#social_navigate li a:link{

    }

    ul#footer_footer li a:visited, ul#footer_navigate li a:visited{

    } 

Answer 4

我知道你已经发现添加一个类作为可接受的答案（并且它是）。您可能还想查看lesscss作为以编程方式应用CSS样式的方法。