Geben Sie in CSS mehrere Attributselektoren an

296

Wie lautet die Syntax für Folgendes:

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

Grundsätzlich möchte ich das inputElement auswählen , das das Attribut name="Sex"sowie das Attribut hat value="M":

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

Elemente wie die folgenden sollten nicht ausgewählt werden:

<input type="radio" name="Sex" value="F" />
css attributes css-selectors John
quelle

Antworten:

437

Einfach input[name=Sex][value=M]wäre ganz nett. Und es ist tatsächlich im Standarddokument gut beschrieben :

Mehrere Attributselektoren können verwendet werden, um auf mehrere Attribute eines Elements oder sogar mehrmals auf dasselbe Attribut zu verweisen.

Hier stimmt der Selektor mit allen SPAN-Elementen überein, deren "Hallo" -Attribut genau den Wert "Cleveland" und deren "Auf Wiedersehen" -Attribut genau den Wert "Columbus" hat:

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

Als Randnotiz ist die Verwendung von Anführungszeichen um einen Attributwert nur erforderlich, wenn dieser Wert kein gültiger Bezeichner ist.

JSFiddle Demo

raina77ow
quelle
8
Gibt es so etwas, aber ODER statt UND?
Törzsmókus
4
Du meinst anders als ,(Komma)?
raina77ow
2
Sie können nicht span [hello = "Cleveland"], [goodbye = "Columbus"] schreiben, aber Sie müssen einen (möglicherweise langen) Teil wiederholen.
Törzsmókus
Sie müssen in der Tat (zumindest für den Moment), es sei denn, Sie verwenden Präprozessoren. Konsultieren Sie diesen Thread für weitere Details.
raina77ow
67

Zum Verketten ist es:

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

Und für die Vereinigung ist es:

input[name="Sex"], input[value="M"] {}
Yogesh Khater
quelle
31

Verketten Sie die Attributselektoren:

input[name="Sex"][value="M"]
Dennis
quelle
1
Es ist erwähnenswert, dass mindestens einer der Attributwerte in Anführungszeichen gesetzt werden muss. Dies würde fehlschlagen, wenn Sie es so input[name=Sex][value=M]schreiben würden, obwohl es gültig wäre, einen Selektor mit nur einem Attribut zu haben, der keine Anführungszeichen verwendet.
Stevec
1
@stevec Wolltest du dies auf die akzeptierte Antwort setzen? Ich habe die Werte in meiner Antwort zitiert. Ich denke auch nicht, dass das stimmt. Sie benötigen Anführungszeichen, wenn die Antwort bestimmte Zeichen enthält, in diesem Beispiel jedoch nicht. Mothereff.in/unquoted-attributes
Dennis
Ich habe diesen Hinweis hinzugefügt, weil ich ihn in mehreren Browsern ohne Anführungszeichen ausprobiert habe und er insgesamt fehlgeschlagen ist. Ich glaube, dass das Problem ist, dass es ohne Anführungszeichen zu mindestens einem mehrdeutig ist, weil es als Eingabe interpretiert werden könnte, deren Name istSex][value=M
stevec
@stevec-Klammern sind aus genau diesem Grund in nicht zitierten Attributen ungültig. Dieses Beispiel funktioniert in Firefox und Chrome: jsfiddle.net/o2abekdh/3
Dennis
4

Nur um hinzuzufügen, dass zwischen dem Wahlschalter und der öffnenden Halterung kein Platz sein sollte. 

td[someclass]

wird funktionieren. Aber

td [someclass]

wird nicht.

Jean-Philippe Martin
quelle
-6 
[class*="test"],[class="second"] {
background: #ffff00;
}
Eli
quelle