Выберите элементы, атрибуты в CSS

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

4 409
html css html5 css-selectors custom-data-attribute

4 ответа:

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

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

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

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

  • вам также не нужно беспокоиться о проверке CSS, поскольку CSS не заботится о именах атрибутов без пространства имен, если они не нарушают синтаксис селектора.

671

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

С: 

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

[anything] {
   /* Styles */
}

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

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

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

89

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

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

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

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

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

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

вот удивительный читать на Селекторы

Скрипка

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

вы можете проверить деталь здесь.

11