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

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

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" />

Ответ 1

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

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

Здесь селектор соответствует всем элементам SPAN, чей атрибут "hello" имеет точно значение "Cleveland" и чей "прощай" атрибут имеет точно значение "Columbus":

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

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

Демо-версия JSFiddle

Ответ 2

Для конкатенации это:

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

И для объединения:

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

Ответ 3

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

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

Ответ 4

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

td[someclass]

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

td [someclass]

не будет.

Ответ 5

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