와일드카드와 CSS 속성 선택기를 사용하여 여러 고유 식별자로 요소의 스타일을 지정하려면 어떻게 해야 합니까?

CSS에서 와일드카드를 사용하여 여러 고유 식별자로 요소 스타일 지정

프런트엔드 개발에서는 공통 클래스와 고유 식별자를 모두 기반으로 요소의 스타일을 지정해야 하는 경우가 많습니다. 다음 시나리오를 고려해보세요.

".tocolor" 클래스를 사용하여 빨간색 배경으로 스타일을 지정하려는 여러 div가 있습니다. 그러나 각 div를 숫자(예: tocolor-1, tocolor-2, tocolor-3)로 고유하게 식별해야 합니다.

처음에는 아래와 같이 스타일을 단순화하기 위해 와일드카드를 사용해 보았습니다.

.tocolor-* {
  background: red;
}

그러나 이 방법은 통하지 않았다. 이 문제에 대한 해결책은 CSS 속성 선택기에 있습니다. 요소의 클래스 속성을 대상으로 지정하여 특정 패턴을 기반으로 요소의 스타일을 지정할 수 있습니다.

와일드카드를 사용한 스타일 지정을 위한 속성 선택기

이 시나리오에서 사용할 수 있는 속성 선택기에는 두 가지 유형이 있습니다.

• [attribute^="value"]: 속성이 지정된 항목으로 시작하는 요소와 일치합니다. value.
• [attribute*="value"]: 속성에 지정된 값이 포함된 요소와 일치합니다.

지정된 HTML 구조의 경우:

<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>

다음 속성을 사용할 수 있습니다. 선택기:

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

• [class^="tocolor-"]: 클래스 속성이 "tocolor-"로 시작하는 모든 div와 일치합니다.
• [class*=" tocolor-"]: 클래스 속성에 하위 문자열이 포함된 모든 div와 일치합니다. "tocolor-".

사용 및 데모

이러한 속성 선택기를 사용하면 표시된 대로 공통 ".tocolor" 클래스와 고유 식별자를 기반으로 요소의 스타일을 효과적으로 지정할 수 있습니다. 다음 데모에서:

[라이브 데모](http://jsfiddle.net/K3693/1/)

추가 학습을 위한 리소스

• CSS 속성 선택기: https://developer.mozilla.org/en -US/docs/Web/CSS/Attribute_selectors
• 속성 선택기에 대한 MDN 문서: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

위 내용은 와일드카드와 CSS 속성 선택기를 사용하여 여러 고유 식별자로 요소의 스타일을 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!