Jak ustawić jedną regułę CSS dla dwóch znaczników?

Question

Chciałbym wiedzieć, jak ustawić jedno ustawienie dla dwóch różnych klas.

Aby dać przykład:

.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; 
} 

Oba przepisy mają taką samą treść. Różnica jest tylko drugim znacznikiem. Czy istnieje sposób na zrobienie czegoś takiego?

.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; 
    } 

Answer 1

jednostkowe selektory przecinkiem:

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

Z selectors level 3 spec:

przecinek oddzielone lista selektorów oznacza związek wszystkie elementy wybrane przez każdego osobnika selektory na liście. (Przecinek to U + 002C.) Na przykład w CSS, gdy kilka selektorów ma takie same deklaracje, można je zgrupować na liście rozdzielanej przecinkami. Białe spacje mogą pojawić się przed i/lub po przecinku.

Answer 2

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

Answer 3

W CSS użyć , (przecinek), niestety jest na całej selektora, a nie tylko części nim.

Jeśli naprawdę chciałeś, aby było czystsze, możesz dać każdemu z form div's unikalny identyfikator, a następnie po prostu #form1, #form2.

Więcej informacji można znaleźć w "Shorten the comma separated CSS selectors".

Na przykład:

.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; 
} 

Answer 4

Oddzielna przecinkami:

.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 
} 

Answer 5

użyć przecinka zamiast oddzielnych reguł 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; 
} 

Answer 6

W innych facetów powiedzieć odpowiedź Twoje pytanie brzmi:

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

Ale ponieważ id ma być unikalna na swoją stronę, kod może zostać uproszczone tak:

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