CSS에서 유사한 클래스 이름을 가진 여러 요소의 스타일을 효율적으로 지정하려면 어떻게 해야 합니까?

CSS에서 와일드카드를 사용하여 여러 요소의 스타일 지정

고유 식별자로 요소의 스타일을 지정할 때 각 요소에 대해 별도의 클래스를 만드는 것이 지루해질 수 있습니다. CSS는 와일드카드 문자 *를 사용하여 우아한 솔루션을 제공합니다.

클래스에 와일드카드 사용

귀하의 예에서는 각각 두 개의 클래스, 하나의 공통 클래스( tocolor) 및 개별 식별자(예: tocolor-1). 단일 클래스로 스타일을 지정하려면 다음 와일드카드 구문을 사용할 수 있습니다.

.tocolor-* {
  background: red;
}

그러나 아시다시피 이 방법은 CSS에서 작동하지 않습니다.

속성 선택기 구조

올바른 접근 방식은 속성 선택기를 사용하는 것입니다. 이를 통해 해당 값에 따라 요소를 선택할 수 있습니다. 속성. 이 경우 클래스 속성을 사용할 수 있습니다.

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

• [class^="tocolor-"]는 클래스 속성이 "tocolor-"로 시작하는 요소를 선택합니다.
• [class*=" tocolor-"]는 클래스 속성에 "tocolor-"가 포함된 요소를 선택합니다.

귀하의 예에서는 두 조건 모두 div를 tocolor-1, tocolor-2 등의 클래스와 일치시킵니다.

데모 및 추가 정보

이 솔루션의 실시간 데모를 볼 수 있습니다. at:

[jsfiddle.net/K3693/1/](http://jsfiddle.net/K3693/1/)

CSS 속성 선택기에 대한 자세한 내용은 다음을 참조하세요. 자원:

• [CSS 속성 선택기](https://www.w3.org/TR/selectors/#attribute-selectors)
• [MDN Docs: 속성 선택기](https://developer.mozilla.org/en-US/ docs/Web/CSS/Attribute_selectors)

위 내용은 CSS에서 유사한 클래스 이름을 가진 여러 요소의 스타일을 효율적으로 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!