如何为两个标签设置一个CSS规则？

举个例子：

.footer #one .flag li .drop_down form div{ 
    width: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-align: left; 
    line-height: 1.5; 
    color: #ccc; 
    font-weight:bolder; 
    margin-left: 30px; 
} 
.footer #two .flag li .drop_down form div{ 
    width: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-align: left; 
    line-height: 1.5; 
    color: #ccc; 
    font-weight:bolder; 
    margin-left: 30px; 
}

两个规则具有相同的内容。差异只是第二个标签。有没有办法做这样的事情？

.footer >>>#one and #two<<<< .flag li .drop_down form div{ 
     width: 80px; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 11px; 
     text-align: left; 
     line-height: 1.5; 
     color: #ccc; 
     font-weight:bolder; 
     margin-left: 30px; 
    }

来源

2012-12-20 bonny

你应该[使用高效的CSS选择器（https://developers.google.com/如果可能，请使用speed/docs/best-practices/rendering＃UseEfficientCSSSelectors）。 –

用逗号分隔的选择器：

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div { 
    /* Rules */ 
}

从selectors level 3 spec：

逗号分隔的选择器的列表表示由每个单独的选择的所有元素的联合列表中的选择器。（逗号为U + 002C）例如，在CSS中，当多个选择器共享相同的声明时，它们可能会被分组到一个逗号分隔列表中。空格可能出现在逗号前和/或后。

来源

2012-12-20 14:02:56

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div{ 
    ... 
}

来源

2012-12-20 14:03:21 MikeTedeschi

在CSS您使用,（逗号），不幸的是，这是对整个选择，而不是只是它的部分。

如果你真的想让它更清洁，你可以给每一个form div's一个唯一的ID，然后只是#form1, #form2。

你可以在“Shorten the comma separated CSS selectors”找到更多的信息。

例如：

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div { 
    width: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-align: left; 
    line-height: 1.5; 
    color: #ccc; 
    font-weight:bolder; 
    margin-left: 30px; 
}

来源

2012-12-20 14:03:28

用逗号分隔：

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div 
{ 
shared css 
} 

.footer #one .flag li .drop_down form div 
{ 
indvi css for one 
} 

.footer #two .flag li .drop_down form div 
{ 
indvi css for two 
}

来源

2012-12-20 14:03:59 Liam

使用逗号，而不是单独的CSS规则：

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div { 
    width: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-align: left; 
    line-height: 1.5; 
    color: #ccc; 
    font-weight:bolder; 
    margin-left: 30px; 
}

来源

2012-12-20 14:08:52

至于其他人说的答案你的问题是：

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div { 
    /* Rules */ 
}

不过由于ID应该是唯一到您的网页，你的代码可以简化这样的：

#one .flag li .drop_down form div, 
#two .flag li .drop_down form div { 
    /* Rules */ 
}

来源

2012-12-20 14:09:22 Bruno

如何为两个标签设置一个CSS规则？

回答

相关问题