Вкажіть декілька селекторів атрибутів у CSS


295

Що таке синтаксис для чогось подібного:

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

Відповіді:


436

Просте input[name=Sex][value=M]було б дуже приємно. І це насправді добре описано в стандартному документі :

Кілька селекторів атрибутів можуть використовуватися для позначення декількох атрибутів елемента або навіть декількох разів до одного і того ж атрибута.

Тут селектор відповідає всім елементам SPAN, атрибут "привіт" має саме значення "Клівленд" і чий атрибут "до побачення" має саме значення "Колумба":

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

Як бічна примітка, використання лапок навколо значення атрибута потрібно лише в тому випадку, якщо це значення не є дійсним ідентифікатором.

Демонстрація JSFiddle


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] 

не буде.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.