CSS / CSS3层次结构[重复]答案

【问题标题】：CSS / CSS3 Hierarchy [duplicate]CSS / CSS3层次结构[重复]
【发布时间】：2014-03-29 00:31:19
【问题描述】：

我有两个不同的标签，它们具有不同的层次结构但设置相同，在这种情况下有什么办法不使我的代码加倍吗？我尝试混合声明，但看起来只有其中一个会真正享受这些特征..

section#leftSection nav#leftNav ul li a{
    background-color: #336b98;
    color: #EBEBEB;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
}

header#layout2_header nav#headerNav ul li a{
    background-color: #336b98;
    color: #EBEBEB;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
}

【问题讨论】：

标签： css

【解决方案1】：

您可以使用逗号, 分隔多个具有相同样式的选择器：

section#leftSection nav#leftNav ul li a, header#layout2_header nav#headerNav ul li a{
    background-color: #336b98;
    color: #EBEBEB;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
}

【讨论】：

哇，你的速度真快.. 太好了，我的错误是：
section#leftSection,header#layout2_header nav#headerNav,nav#leftNav ul li a
很高兴它帮助了兄弟 ;-)
你也可以给你的 ul 标签一个类，只用ul.classname li a作为选择器。无论如何，这是一个很好的解决方案 +1
有趣，它变得非常复杂，但又很方便。

【解决方案2】：

用逗号分隔选择器，打开大括号添加你的代码，嘿，presto...

section#leftSection nav#leftNav ul li a, 
header#layout2_header nav#headerNav ul li a{
    background-color: #336b98;
    color: #EBEBEB;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
}

最好将每个选择器保留在自己的行中，以使您的代码更具可读性。

【讨论】：