동적 클래스 이름을 사용하여 div를 선택

Question

사이트에서 작업하면서 동적 ID 번호로 div 클래스를 선택해야하는 상황에 처하게되었습니다.

<div class="reply_to_08"></div> 

그래서 나는이

.reply_to_08 {} 

을 할 수 그러나 나는를 쓰고 싶지 않았다 예를 들어 모든 새 DIV 클래스는과 같이 클래스 명에 내 데이터베이스에서 그것의 "ID"를 수행 할 것 모든 div에 대한 새로운 CSS 선택기. 동적 인 숫자 인 "08"을 무시하면서 ".reply_to_"가있는 모든 것을 선택하고 싶었습니다.

div[class^=reply_to_] 

음이 작동했지만 문제가 해결 것 또는 그것을 어떻게 작동하는지 이유에 대한 아무런 설명이 없었다 :

그래서 내가했던 웹 사이트에 블로그 게시물에 대한 해결책을 발견했다. 그리고 나는 그것을 이해하는 것처럼 보일 수 없다.

누군가 그 이유에 대해 설명 할 수 있습니까? 이 방법이 권장 되는가, 아니면 내가 원하는 것을 성취 할 수있는 또 다른 방법이 있는가?

Answer 1

키는 Attribute Selector ([class^=reply_to_])의 ^= 패턴이다. 귀하의 경우에는

의 ^=는 그 class 속성 값 "reply_to_"

Answer 2

로 시작^=로 시작을 의미 모든 요소를 ​​선택할 수 있습니다. 귀하의 경우에는 "reply_to_"로 시작하는 클래스가있는 모든 div를 선택한다는 의미입니다.

그것은 모든 트릭입니다.

Answer 3

E[foo^="bar"] - foo의 요소 값이 정확히 bar 인 요소 E입니다.

-W3C Selectors Level 3 사양.

참고 :

6.3 :IE 7 +, 파이어 폭스 3.5, 사파리 3.2 이상, 오페라 9.5 이상이이 CSS3 스펙의 섹션 6.3.2입니다

Answer 4

(http://caniuse.com/#feat=css-sel3 참조). 2.

가

[ATT^= 브로]가 값 접두어 "발"로 시작 ATT 특성을 가진 원소를 나타낸다 : 문자열 매칭 세 추가적인 특성 선택기는 속성의 값에 문자열을 일치시키기 위해 제공되는 속성 선택자. "val"이 하늘의 캐릭터 라인의 경우, 셀렉터는 아무것도 나타내지 않습니다. [att $ = val] 값이 접미사 "val"로 끝나는 att 속성이있는 요소를 나타냅니다. "val"이 하늘의 캐릭터 라인의 경우, 셀렉터는 아무것도 나타내지 않습니다. [att * = val] 값이 부분 문자열 "val"의 인스턴스를 하나 이상 포함하는 att 속성이있는 요소를 나타냅니다. "val"이 하늘의 캐릭터 라인의 경우, 셀렉터는 아무것도 나타내지 않습니다.

Answer 5

CSS3에 새로 추가 된 CSS 선택 도구입니다.CSS3 selectors에 대한 게시물은 짧은 섹션에서 언급 한 내용과 같습니다.

기본적으로 "시작"이라고 쓰여 있으므로 선택기 div[class^=reply_to_]에는 class-name이 "reply_to"로 시작하는 클래스가있는 div 요소가 모두 들어 있다고 나와 있습니다.

선택기는 CSS3 전용이므로 이전 브라우저에서는 선택기에 대한 지원이 제한됩니다.

업데이트 업데이트 "시작"선택기는 IE7 이상에서 지원되므로 분명히 지원은 꽤 괜찮은 것 같습니다. IE6 지원 (이 경우 미안합니다)이 붙어 있지 않은 경우입니다. 선택자에 대한 브라우저 지원은 full list입니다.