클래스에 대한 CSS의 와일드카드 *

클래스에 대한 CSS의 와일드카드 *

저는 제가 스타일링하고 있는 이 디비들을 가지고 있습니다..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;
}

수업을 한 번만 할 수 있는 방법이 있습니까?tocolor-*와일드카드를 사용해 보았습니다.*이 css에서처럼, 하지만 작동하지 않았습니다.

.tocolor-*{
  background: red;
}

필요한 것을 속성 선택기라고 합니다.HTML 구조를 사용하는 예는 다음과 같습니다.

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

대신에div당신은 어떤 요소를 추가하거나 그것을 완전히 제거할 수 있습니다, 그리고 그 자리에서.class지정된 요소의 속성을 추가할 수 있습니다.

[class^="tocolor-"]"to color-"로 시작합니다.
[class*=" tocolor-"]공백 문자 바로 뒤에 나타나는 "tocolor-" 부분 문자열을 포함합니다.

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

CSS 속성 선택기에 대한 자세한 내용은 여기와 여기에서 확인할 수 있습니다.MDN Docs MDN Docs에서 제공

네, 할 수 있습니다.

*[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/ #discovery-presentation

[att|=val]

특성 속성을 가진 요소를 나타내며, 해당 값은 정확히 "val"로 시작하거나 "-"(U+002D) 바로 뒤에 "val"로 시작합니다.

만약 당신이 div의 추가적인 스타일링을 위해 고유한 식별자가 필요하지 않고 HTML5를 사용하고 있다면, 당신은 사용자 정의 데이터 속성을 사용해 볼 수 있습니다.여기를 읽어보거나 다음을 위해 구글 검색을 시도하십시오.HTML5 Custom Data Attributes

언급URL : https://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes