Выбор элементов по атрибуту данных в CSS

Question

Выбор элементов по атрибуту данных в CSS

370

Можно ли выбрать элементы в CSS с помощью атрибутов данных HTML5 (например, data-role)?

Diogo Cardoso 16 март 2011, в 10:03

Источник

Теги:

html

css

html5

css-selectors

custom-data-attribute

4 ответа

79

Также возможно выбирать атрибуты независимо от их содержимого, в современных браузерах

с:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Например: http://codepen.io/jasonm23/pen/fADnu

Работает с очень значительным процентом браузеров.

Примечание. Это также можно использовать в селекторе JQuery или с помощью document.querySelector

ocodo 12 сен. 2013, в 03:04

0

Вау, я никогда не видел, чтобы это можно было использовать так !! +1! И FWIW, теперь, когда истек срок действия браузеров, я считаю, что он работает в IE7 +, поэтому его поддержка в значительной степени вездесуща. Забавно, что даже Крис Койер не упомянул об этом здесь
Camilo Martin 26 дек. 2013, в 00:36
0

Спасибо @CamiloMartin. Я удалил ссылку browsershots, чтобы избежать путаницы / раздражения.
ocodo 27 дек. 2013, в 23:17
0

Добавлена ссылка на ветку Криса Койера css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin
ocodo 27 дек. 2013, в 23:24
0

Отлично, чем больше, тем лучше кто знает :) и да, подтвердил работу на IE7 +.
Camilo Martin 29 дек. 2013, в 02:15
1

В любом случае, этот синтаксис не является новым - все больше людей были удивлены, что IE6 не поддерживает его, чем IE7 +. Вы можете в значительной степени предположить, что все селекторы CSS2.1 поддерживаются в IE8 и более поздних версиях - IE7 делает большинство, хотя и с некоторыми неясными ошибками. Все современные браузеры некоторое время поддерживали селекторы уровня 3, вместо этого Chrome был глючным.
BoltClock♦ 26 март 2014, в 03:23
1

Поскольку мы говорим о селекторах атрибутов, интересно отметить, что селекторы атрибутов подстроки, представленные на уровне 3 ( ^= , *= и $= ), также поддерживаются IE7 и IE8. Может быть, они были введены в IE до стандартизации.
BoltClock♦ 26 март 2014, в 03:40

Показать ещё 4 комментария

26

Стоит отметить селекторы атрибутов подстроки CSS3

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

Matas Vaitkevicius 18 май 2015, в 17:03

5

Вы можете комбинировать несколько селекторов, и это так здорово, зная, что вы можете выбрать каждый атрибут и атрибут на основе их значения, например href, на основе их значений только с помощью CSS.

Атрибуты селекторов позволяют вам играть с некоторыми дополнительными атрибутами id и class

Вот удивительное чтение в Селектора атрибутов

Fiddle

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Поддержка браузера:
IE6 +, Chrome, Firefox и Safari

Вы можете проверить подробности здесь.

Aamir Shahzad 30 март 2016, в 04:35

Ещё вопросы

Вау, я никогда не видел, чтобы это можно было использовать так !! +1! И FWIW, теперь, когда истек срок действия браузеров, я считаю, что он работает в IE7 +, поэтому его поддержка в значительной степени вездесуща. Забавно, что даже Крис Койер не упомянул об этом здесь
Спасибо @CamiloMartin. Я удалил ссылку browsershots, чтобы избежать путаницы / раздражения.
Добавлена ссылка на ветку Криса Койера css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin
Отлично, чем больше, тем лучше кто знает :) и да, подтвердил работу на IE7 +.
В любом случае, этот синтаксис не является новым - все больше людей были удивлены, что IE6 не поддерживает его, чем IE7 +. Вы можете в значительной степени предположить, что все селекторы CSS2.1 поддерживаются в IE8 и более поздних версиях - IE7 делает большинство, хотя и с некоторыми неясными ошибками. Все современные браузеры некоторое время поддерживали селекторы уровня 3, вместо этого Chrome был глючным.
Поскольку мы говорим о селекторах атрибутов, интересно отметить, что селекторы атрибутов подстроки, представленные на уровне 3 ( ^= , *= и $= ), также поддерживаются IE7 и IE8. Может быть, они были введены в IE до стандартизации.

BoltClock · Accepted Answer · 2011-03-16T12-48-00.000Z

Если вы имеете в виду использование селектора атрибутов, обязательно, почему бы и нет:

[data-role="page"] {
    /* Styles */
}

Существует множество селекторов атрибутов, которые вы можете использовать для различных сценариев, которые описаны в документе, на который я ссылаюсь. Обратите внимание, что, несмотря на то, что атрибуты пользовательских данных являются "новой функцией HTML5",

У браузеров обычно нет проблем с поддержкой нестандартных атрибутов, поэтому вы должны иметь возможность фильтровать их с помощью селекторов атрибутов; и
вам также не нужно беспокоиться о проверке CSS, поскольку CSS не заботится об именах имен, не связанных с именами, если они не нарушают синтаксис селектора.

Совместим со всеми навигаторами?
Лучший список селекторов, которые я видел с возможностями и описаниями. code.tutsplus.com/tutorials/...
Кажется, что CSS не обнаруживает это, если атрибут данных установлен или изменен с помощью JS.
@ Мэтью Т. Бейкер: Интересно, спасибо. Я не могу утверждать, что понимаю, как наборы данных работают под капотом, но, скорее всего, изменение набора данных элемента не устанавливает или не обновляет его список атрибутов, а именно то, на что действительно смотрит селектор атрибутов. Другими словами, преобразование атрибутов данных в набор данных работает только одним способом - любые изменения последнего не отражаются обратно.
После дальнейшего исследования появится $("#element").data("field","value"); не изменяет значение атрибутов данных, оно только изменяет кэшированную версию jQuery DOM. Для изменения фактического атрибута DOM необходимо использовать $("#element").attr("data-field","value"); , Сделав мой оригинальный комментарий недействительным.
Да, похоже, что изменение набора данных тоже работает @Matthew - jsfiddle.net/BoltClock/k378xgj3 Спасибо, jQuery.
Если у вас есть <div data-role="page"><div class="foo">Content here</div></div> и вы хотите изменить стиль внутреннего div, вы можете использовать [data-role="page"] .foo{background-color:red;}