클래스 중 하나가 지정된 접두사와 일치하는 모든 요소에 CSS 규칙을 적용하고 싶습니다.
예를 들어 status-(A와 C로 시작 하지만 다음 스 니펫에서 B가 아닌) 클래스가있는 div에 적용되는 규칙을 원합니다 .
<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>일종의 조합 :
div[class|=status]및div[class~=status-]
CSS 2.1에서 가능합니까? 모든 CSS 사양에서 가능합니까?
참고 : jQuery를 사용하여 에뮬레이션 할 수 있다는 것을 알고 있습니다.
답변:
그것은 CSS2.1으로 행할은 아니지만, (CSS3 속성 스트링 매칭 셀렉터 수 있다 IE7 + 지원)
div[class^="status-"], div[class*=" status-"]두 번째 속성 선택기에서 공백 문자를 확인하십시오. 속성이 다음 조건 중 하나를 충족 하는 div요소를 선택합니다 class.
[class^="status-"] — "status-"로 시작
[class*=" status-"]— 공백 문자 바로 다음에 나오는 하위 문자열 "status-"를 포함합니다. 클래스 이름은 HTML 사양 에 따라 공백으로 구분 되므로 중요한 공백 문자입니다. 여러 클래스를 지정하는 경우에는 제 후에이 검사 다른 클래스 와 경우에는 속성 값을 제 클래스를 검사 보너스 추가 공간이 패딩 (출력 그 일부 애플리케이션에서 발생할 수있다 class동적 특성).
당연히 이것은 여기 에서 설명한 것처럼 jQuery에서도 작동 합니다 .
위에서 설명한대로 두 개의 속성 선택기를 결합해야하는 이유 [class*="status-"]는 다음과 같은 속성 선택기 가 다음 요소와 일치하기 때문에 바람직하지 않습니다.
<div id='D' class='foo-class foo-status-bar bar-class'></div>그러한 시나리오가 발생 하지 않도록 보장 할 수 있다면 단순성을 위해 이러한 선택기를 자유롭게 사용할 수 있습니다. 그러나 위의 조합은 훨씬 강력합니다.
HTML 소스 또는 마크 업을 생성하는 응용 프로그램을 제어 할 수있는 경우 Gumbo가 제안한대로status- 접두어를 자체 status클래스로 만드는 것이 더 간단 할 수 있습니다 .
[class*=" anim-overlay-"] a:hover:after{...}. 내 CSS 클래스는 anim-overlay-1, anim-overlay-2.....anim-overlay-8
.anim-overlay-*{...}있습니까?
CSS 속성 선택기를 사용하면 문자열의 속성을 확인할 수 있습니다. (이 경우-클래스 이름)
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(2.1 및 3의 경우 실제로 '추천'상태 인 것 같습니다)
작동 방식에 대한 개요는 다음과 같습니다.
[ ]: 복잡한 선택기의 컨테이너 입니다. class: 'class'는 이 경우보고 있는 속성 입니다.* : 수정 자 (있는 경우) :이 경우 "와일드 카드"는 일치하는 항목을 찾고 있음을 나타냅니다.test- : 속성의 값 (있는 경우)-문자열 "test-"를 포함하는 값예를 들어,
[class*='test-'] {
color: red;
}당신은 요소와 함께, 정당한 이유가 있다면 더 구체적 일 수 있습니다
ul[class*='test-'] > li { ... }
나는 엣지 케이스를 찾으려고 노력했지만 ^and는 *-를 모두 사용할 필요가 없습니다 .
예 : http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
IE6 이상의 모든 것은 행복하게 순종 할 것입니다. :)
참고 :
[class] { ... }
수업으로 무엇이든 선택합니다 ...
[class*='test-']와 같은 요소와 일치합니다 <div class='foo-test-bar'>. 그것은 내 대답에 설명 된대로 ^와 *를 결합 해야하는 가장 중요한 경우입니다. 그리고 IE6는 속성 선택기를 지원하지 않습니다.
당신은 이것을 할 수 없습니다. -기호까지 정확하게 또는 부분적으로 일치하는 하나의 속성 선택기 가 있지만 여러 속성이 있으므로 여기서 작동하지 않습니다. 찾고있는 클래스 이름이 항상 첫 번째라면 다음과 같이하십시오.
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>
</body>
</html>이것은 어떤 CSS 속성 선택자가 가장 가까운지를 지적하기 위해, 자바 스크립트가 속성을 조작 할 수 있기 때문에 클래스 이름이 항상 앞에 있다고 가정하지 않는 것이 좋습니다.
status-하고 일치하지 않으려면 선택기가 훨씬 복잡해집니다.div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)또한 IE7 / IE8 지원이 손실됩니다. 고맙게도 마크 업이 제정신이라면 해당 클래스를 제외 할 필요가 없습니다.