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

295

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" />
Jan
źródło

Odpowiedzi:

436

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

raina77ow
źródło
8
jest coś takiego, ale LUB zamiast AND?
törzsmókus
4
Masz na myśli inne niż ,(przecinek)?
raina77ow
2
nie możesz napisać span [hello = "Cleveland"], [goodbye = "Columbus"], ale musisz powtórzyć (możliwie długą) część.
törzsmókus
Musisz to zrobić (przynajmniej na razie), chyba że używasz preprocesorów. Sprawdź ten wątek, aby uzyskać więcej informacji.
raina77ow
67

Do konkatenacji jest to:

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

A dla zawarcia związku to:

input[name="Sex"], input[value="M"] {}
Yogesh Khater
źródło
31

Połącz selektory atrybutów:

input[name="Sex"][value="M"]
Dennis
źródło
1
Warto zauważyć, że należy podać przynajmniej jedną wartość atrybutu. Nie udałoby się to, gdybyś napisał to, input[name=Sex][value=M]mimo że prawidłowe byłoby posiadanie selektora z tylko jednym atrybutem, który nie używał cudzysłowów.
stevec
1
@stevec Czy chciałeś umieścić to na zaakceptowanej odpowiedzi? Przytoczyłem wartości w mojej odpowiedzi. Nie sądzę też, żeby to była prawda. Potrzebujesz cytatów, jeśli odpowiedź zawiera określone znaki, ale nie w tym przykładzie. mothereff.in/unquoted-attributes
Dennis
Dodałem tę notatkę, ponieważ wypróbowałem ją w kilku przeglądarkach bez cudzysłowów i we wszystkich nie udało się. Uważam, że problem polega na tym, że bez cytowania co najmniej jednego, jest niejednoznaczny, ponieważ można go interpretować jako dane wejściowe, których nazwa toSex][value=M
stevec
Z tego właśnie powodu nawiasy @stevec są niepoprawne w niecytowanych atrybutach. Ten przykład działa w przeglądarce Firefox i Chrome: jsfiddle.net/o2abekdh/3
Dennis
4

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.

Jean-Philippe Martin
źródło
-6
[class*="test"],[class="second"] {
background: #ffff00;
}
Eli
źródło