클래스 접두사별로 CSS 선택기가 있습니까?
클래스 중 하나가 지정된 접두사와 일치하는 모든 요소에 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클래스로 만드는 것이 더 간단 할 수 있습니다 .
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] { ... }
수업으로 무엇이든 선택합니다 ...
This is not possible with CSS selectors. But you could use two classes instead of one, e.g. status and important instead of status-important.
You can't do this no. There is one attribute selector that matches exactly or partial until a - sign, but it wouldn't work here because you have multiple attributes. If the class name you are looking for would always be first, you could do this:
<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>
Note that this is just to point out which CSS attribute selector is the closest, it is not recommended to assume class names will always be in front since javascript could manipulate the attribute.
참고URL : https://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix
'IT' 카테고리의 다른 글
| Twitter Bootstrap 3에서 col-lg-push 및 col-lg-pull을 사용한 열 순서 조작 (0) | 2020.06.04 |
|---|---|
| iOS 7에서만 실행할 때 Storyboard 프로토 타입 셀 (Xcode 6, iOS 8 SDK)의 UICollectionViewCell contentView 프레임 자동 크기 조정 문제가 발생합니다. (0) | 2020.06.04 |
| 앵귤러 2 호버 이벤트 (0) | 2020.06.04 |
| Windows 7의 명령 프롬프트에서 Python 프로그램을 어떻게 실행합니까? (0) | 2020.06.04 |
| jQuery 액세스 입력 숨겨진 값 (0) | 2020.06.04 |