클래스 접두사별 CSS 셀렉터가 있습니까?
클래스 중 하나가 지정된 접두사와 일치하는 모든 요소에 CSS 규칙을 적용하고 싶습니다.
예를 들어, 나는 시작하는 클래스가 있는 div에 적용되는 규칙을 원합니다.status-(A와 C, 다음 토막글에서는 B가 아님):
<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에서는 할 수 없지만, (IE7+에서 지원되는) CSS3 속성 부분 문자열 일치 선택기에서는 가능합니다.
div[class^="status-"], div[class*=" status-"]
두 번째 속성 선택기에서 공백 문자를 확인합니다.이거 들어옵니다.div의 원소.classattribute는 다음 조건 중 하나를 충족합니다.
[class^="status-"]— "status-"로 시작합니다.[class*=" status-"]— 에는 공백 문자 바로 뒤에 발생하는 하위 문자열 "status-"가 들어 있습니다.클래스 이름은 HTML 규격별로 공백으로 구분되므로 중요한 공백 문자가 됩니다.이것은 여러 클래스가 지정된 경우 첫 번째 클래스 이후의 다른 클래스를 검사하며, 속성 값이 스페이스 패딩된 경우(출력되는 일부 응용 프로그램에서 발생할 수 있음) 첫 번째 클래스를 검사하는 보너스를 추가합니다.class속성을 동적으로 지정합니다.
당연히 이것은 jQuery에서도 작동합니다. 여기서 입증된 바와 같이 말이죠.
위와 같이 두 개의 속성 선택기를 결합해야 하는 이유는 다음과 같은 속성 선택기 때문입니다.[class*="status-"]는 다음 요소와 일치합니다. 이 요소는 바람직하지 않을 수 있습니다.
<div id='D' class='foo-class foo-status-bar bar-class'></div>
그런 시나리오가 발생하지 않도록 보장할 수 있다면 단순화를 위해 자유롭게 선택기를 사용할 수 있습니다.그러나 위의 조합이 훨씬 더 견고합니다.
만약 당신이 HTML 소스 또는 마크업을 생성하는 애플리케이션에 대한 통제권을 가지고 있다면, 단지 그것을 만드는 것이 더 간단할지도 모릅니다.status-고유의 접두사를 붙입니다.status검보가 제안한 수업 대신에.
CSS Attribute selector를 사용하면 문자열의 속성을 확인할 수 있습니다.(이 경우 - 클래스 이름)
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(실제로 2.1, 3에 대해 '보상' 상태인 것처럼 보입니다.)
다음은 *그것이 어떻게 작동한다고 생각하는지에 나와 있습니다.
[ ]: 복잡한 셀렉터를 위한 컨테이너입니다.class: 'class'는 이 경우에 보고 있는 속성입니다.*: modifier(있는 경우): 이 경우 - "와일드카드"는 일치하는 항목을 찾고 있음을 나타냅니다.test-이든 될 수 ): "test-"(무엇이든 가능) 문자열을 포함하는 속성의 값(즉, 하나가 있음)
예를 들어 다음과 같습니다.
[class*='test-'] {
color: red;
}
만약 당신이 좋은 이유가 있다면, 당신은 더 구체적일 수 있습니다, 그리고 요소도.
ul[class*='test-'] > li { ... }
케이스를 를 했지만 을 할 가 의 조합을 사용할 필요가 없다고 .^그리고.*- 모든 걸 얻었으니...
예: http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/ #graphics=sel2
IE6 이상의 모든 것은 기꺼이 복종할 것입니다. :)
참고:
[class] { ... }
클래스가 있는 모든 항목을 선택합니다.
CSS 셀렉터에서는 불가능합니다.하지만 여러분은 한 개의 클래스 대신에 두 개의 클래스를 사용할 수 있습니다. 예를 들어 상태와 상태 중요 대신 중요한 클래스입니다.
그러면 안 돼요.a - 기호가 있을 때까지 정확하게 또는 부분적으로 일치하는 속성 선택기가 하나 있지만 여러 특성이 있으므로 여기서는 작동하지 않습니다.원하는 클래스 이름이 항상 첫번째인 경우 다음 작업을 수행할 수 있습니다.
<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 속성 선택기가 가장 가까운지를 지적하기 위한 것이며, javascript가 속성을 조작할 수 있으므로 클래스 이름이 항상 앞에 있을 것이라고 가정하는 것은 권장되지 않습니다.
언급URL : https://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix
'programing' 카테고리의 다른 글
| MariaDB: WITH 문과 함께 "INSERT ... SELECT"를 사용하는 방법 (0) | 2023.09.12 |
|---|---|
| ODBC와 ADO.NET의 차이점은 무엇입니까? (0) | 2023.09.12 |
| XML 문서에서 탈출하려면 어떤 문자가 필요합니까? (0) | 2023.09.12 |
| 정렬을 위한 Varchar to number 변환 (0) | 2023.09.12 |
| CLOWER_Bound 구현 (0) | 2023.09.12 |