클래스 용 CSS의 와일드 카드 *

클래스 용 CSS의 와일드 카드 *

---

스타일링하는 div가 .tocolor있지만 고유 식별자 1,2,3,4 등이 필요하므로 다른 클래스로 추가합니다 tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

단지 1 클래스를 가질 수있는 방법이 있나요 tocolor-*. *이 CSS에서와 같이 와일드 카드 를 사용해 보았지만 작동하지 않았습니다.

.tocolor-*{
  background: red;
}

---

필요한 것은 속성 선택기입니다. html 구조를 사용하는 예는 다음과 같습니다.

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

대신 div요소를 추가하거나 모두 제거 할 수 있으며 대신 class지정된 요소의 속성을 추가 할 수 있습니다.

[class^="tocolor-"]— "tocolor-"로 시작합니다.
[class*=" tocolor-"]— 공백 문자 바로 뒤에 나오는 "tocolor-"하위 문자열을 포함합니다.

데모 : http://jsfiddle.net/K3693/1/

CSS 속성 선택기에 대한 자세한 내용은 여기 와 여기에서 찾을 수 있습니다 . 그리고 MDN 문서에서 MDN 문서

---

네, 할 수 있습니다.

*[id^='term-']{
    [css here]
}

로 시작하는 모든 ID가 선택됩니다 'term-'.

이렇게하지 않는 이유는이 방법을 선택하는 것이 더 나은 곳을 봅니다. 스타일은 제가 직접하지 않겠지 만 가능합니다.

---

대체 솔루션 :

div[class|='tocolor'] "tocolor-1", "tocolor-2"등을 포함하여 "tocolor-"로 시작하는 "class"속성 값과 일치합니다.

이것이 일치하지 않을 것이라는 점을 조심하십시오.

<div class="foo tocolor-">

참조 : https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

att 속성이있는 요소를 나타냅니다. 해당 값은 정확히 "val"이거나 "val"로 시작하고 바로 뒤에 "-"가옵니다 (U + 002D).

---

div의 추가 스타일 지정을 위해 고유 식별자가 필요하지 않고 HTML5를 사용하는 경우 사용자 지정 데이터 속성을 사용해 볼 수 있습니다. 여기에서 읽 거나 Google 검색을 시도 하십시오.HTML5 Custom Data Attributes

참고 URL : https://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes