Określ wiele selektorów atrybutów w CSS

Jaka jest składnia do robienia czegoś takiego:

input[name="Sex" AND value="M"]

Zasadniczo chcę wybrać inputelement, który ma atrybut, name="Sex"a także atrybut value="M":

<input type="radio" name="Sex" value="M" />

Elementy takie jak następujące nie powinny być wybrane:

<input type="radio" name="Sex" value="F" />

Proste input[name=Sex][value=M]byłoby całkiem niezłe. I jest to właściwie dobrze opisane w standardowym dokumencie :

Można użyć wielu selektorów atrybutów, aby odnieść się do kilku atrybutów elementu lub nawet kilka razy do tego samego atrybutu.

Tutaj selektor pasuje do wszystkich elementów SPAN, których atrybut „hello” ma dokładnie wartość „Cleveland”, a atrybut „goodbye” ma dokładnie wartość „Columbus”:

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Na marginesie, użycie cudzysłowu wokół wartości atrybutu jest wymagane tylko wtedy, gdy ta wartość nie jest prawidłowym identyfikatorem.

JSFiddle Demo

Do konkatenacji jest to:

input[name="Sex"][value="M"] {}

A dla zawarcia związku to:

input[name="Sex"], input[value="M"] {}

Połącz selektory atrybutów:

input[name="Sex"][value="M"]

Wystarczy dodać, że pomiędzy selektorem a wspornikiem otwierającym nie powinno być odstępu.

td[someclass] 

będzie działać. Ale

td [someclass] 

nie będzie.

[class*="test"],[class="second"] {
background: #ffff00;
}