如何爲兩個標籤設置一個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規則？

回答

相關問題