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 */
}