Укажите несколько селекторов атрибутов в CSS

296

Каков синтаксис для выполнения чего-то вроде:

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

В основном, я хочу выбрать inputэлемент, который имеет атрибут, name="Sex"а также атрибутvalue="M" :

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

Не следует выбирать такие элементы, как следующие :

<input type="radio" name="Sex" value="F" />
Джон
источник

Ответы:

437

Простое input[name=Sex][value=M]было бы неплохо. И это на самом деле хорошо описано в стандартном документе :

Несколько селекторов атрибутов могут использоваться для ссылки на несколько атрибутов элемента или даже несколько раз на один и тот же атрибут.

Здесь селектор соответствует всем элементам SPAN, у которых атрибут «hello» имеет в точности значение «Cleveland», а чей атрибут «до свидания» имеет в точности значение «Columbus»:

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

Как примечание, использование кавычек вокруг значения атрибута требуется только в том случае, если это значение не является допустимым идентификатором.

JSFiddle Demo

raina77ow
источник
8
есть ли что-то подобное, но ИЛИ вместо И?
törzsmókus
4
Вы имеете в виду, кроме ,(запятая)?
raina77ow
2
Вы не можете написать span [hello = "Cleveland"], [goodbye = "Columbus"], но вы должны повторить (возможно, длинную) часть.
törzsmókus
Вы должны действительно (по крайней мере, на данный момент), если вы не используете препроцессоры. Обратитесь к этой теме для более подробной информации.
raina77ow
67

Для объединения это:

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

И для принятия союза это:

input[name="Sex"], input[value="M"] {}
Йогеш Хатер
источник
31

Объединить селекторы атрибутов:

input[name="Sex"][value="M"]
Деннис
источник
1
Стоит отметить, что хотя бы одно из значений атрибута должно быть заключено в кавычки. Это не получится, если вы напишете его так, как input[name=Sex][value=M]если бы оно было допустимым, если бы у него был только один атрибут, который не использовал кавычки.
Stevec
1
@stevec Вы хотели поставить это на принятый ответ? Я привел значения в моем ответе. Я тоже не думаю, что это правда. Вам нужны кавычки, если ответ содержит определенные символы, но не в этом примере. mothereff.in/unquoted-attributes
Деннис
Я добавил это примечание, потому что я пробовал его в нескольких браузерах без кавычек, и это не удалось во всех. Я полагаю, что проблема в том, что без кавычек хотя бы на одну, это неоднозначно, потому что это может быть интерпретировано как ввод, имя которогоSex][value=M
stevec
Скобки @stevec недопустимы в атрибутах без кавычек именно по этой причине. Этот пример работает в Firefox и Chrome: jsfiddle.net/o2abekdh/3
Деннис
4

Просто добавлю, что между селектором и открывающей скобой не должно быть места.

td[someclass] 

буду работать. Но

td [someclass] 

не буду.

Жан-Филипп Мартин
источник
-6
[class*="test"],[class="second"] {
background: #ffff00;
}
Eli
источник