HTML에 다음과 같은 요소가있는 경우 :
id="product42"
id="product43"
...
“product”로 시작하는 모든 ID를 어떻게 일치합니까?
자바 스크립트를 사용하여 정확하게 수행하는 답변을 보았지만 CSS로만 수행하는 방법은 무엇입니까?
답변
[id^=product]
^=
“로 시작”을 나타냅니다. 반대로 $=
“끝”을 나타냅니다.
기호 실제로 정규식 구문에서 차용 ^
하고 $
각각과 “문자열의 끝” “문자열의 시작”을 의미한다.
자세한 내용 은 사양 을 참조하십시오 .
답변
나는 이렇게 할 것입니다 :
[id^="product"] {
...
}
이상적으로는 수업을 사용하십시오. 이것은 클래스에 대한 것입니다.
<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>
이제 선택기가 다음과 같이됩니다.
.product {
...
}
답변
사용 속성 선택을
[id^=product]{property:value}
답변
나는 똑같은 일을하는 또 다른 CSS 선택기가 있음을 알아 차렸다. 구문은 다음과 같습니다.
[id|="name_id"]
큰 따옴표로 묶인 단어로 시작하는 모든 요소 ID를 선택합니다.