CSS에서 데이터 속성별로 요소 선택

HTML5 데이터 속성 (예 :)으로 CSS에서 요소를 선택할 수 data-role있습니까?

속성 선택기를 사용하는 것을 의미한다면 , 왜 그렇지 않습니까?

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

내가 링크 한 문서에서 모두 다루는 다양한 시나리오에 사용할 수있는 다양한 속성 선택기가 있습니다. 맞춤 데이터 속성은 '새로운 HTML5 기능'이지만

• 브라우저는 일반적으로 비표준 속성을 지원하는 데 아무런 문제가 없으므로 속성 선택기로 필터링 할 수 있어야합니다. 과

• CSS는 선택자 구문을 위반하지 않는 한 네임 스페이스가없는 속성 이름에 신경 쓰지 않기 때문에 CSS 유효성 검사에 대해 걱정할 필요가 없습니다.

최신 브라우저에서 컨텐츠에 관계없이 속성을 선택할 수도 있습니다

와:

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

[anything] {
   /* Styles */
}

예를 들면 다음과 같습니다. http://codepen.io/jasonm23/pen/fADnu

매우 많은 비율의 브라우저에서 작동합니다.

이것은 JQuery 선택기에서 사용하거나 document.querySelector

CSS3 부분 문자열 속성 선택자를 주목할 가치가 있습니다.

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

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

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

여러 선택기를 결합 할 수 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

자세한 내용은 여기를 참조하십시오 .

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}