Cum să setați o regulă CSS pentru două etichete? (Programare, Html, Css, Etichete)

bonny a intrebat.

Aș dori să știu cum pot seta o singură regulă pentru două clase diferite.

Ca să dau un exemplu:

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

Ambele reguli au același conținut. Diferența este doar al doilea tag. Există o modalitate de a face așa ceva?

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

Comentarii

5 răspunsuri
James Allardice

Separați selectorii cu o virgulă:

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

De la selectori nivel 3 spec.:

O listă de selectori separați prin virgulă reprezintă uniunea tuturor elementelor selectate de fiecare dintre selectorii individuali din listă. (O virgulă este U+002C.) De exemplu, în CSS, atunci când mai mulți selectori au aceleași declarații, aceștia pot fi grupați într-o listă separată prin virgulă. Spațiul alb poate apărea înainte și/sau după virgulă.

Pez Cuckow

În CSS se utilizează un , (virgulă), din păcate aceasta se aplică pe întregul selector și nu doar pe o secțiune a acestuia.

Dacă ați dori cu adevărat să fie mai curat, ați putea să dați fiecărei secvențe de form div's un id unic și apoi doar #form1, #form2.

Puteți găsi mai multe informații în „Scurtarea selectorilor CSS separați prin virgulă”.

De exemplu:

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

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

Rakesh Vadnal

Utilizați o virgulă în loc de reguli CSS separate:

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

Liam

Separați cu o virgulă:

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