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

클래스에 대해 CSS에서 와일드카드 사용: * 및 속성 선택기

특정 패턴을 따르는 여러 클래스가 있는 요소에 스타일을 지정할 때 각 클래스에 대해 별도의 규칙을 만드는 것이 지루할 수 있습니다. 각 변형. 여기서 CSS 와일드카드가 사용됩니다.

귀하의 경우 "tocolor-1", "tocolor-2", "tocolor-3"과 같은 클래스 이름을 가진 여러 요소에 배경색을 적용하려고 합니다. , 등. ".tocolor-*"와 같은 와일드카드를 사용하는 것이 해결책처럼 보일 수 있지만 CSS에서는 작동하지 않습니다.

대신 속성 선택기를 활용하여 이 목표를 달성할 수 있습니다. 속성 선택기를 사용하면 클래스와 같은 속성을 기반으로 요소를 대상으로 지정할 수 있습니다.

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

이 코드에서 속성 선택기 [class^="tocolor-"]는 클래스 속성이 "로 시작하는 요소를 대상으로 합니다. tocolor-", "tocolor-1", "tocolor-2" 등과 같은 클래스 이름이 있는 모든 요소를 ​​효과적으로 일치시킵니다.

선택기 [class*=" tocolor-"]는 대상을 지정합니다. 클래스 속성에 하위 문자열 "tocolor-"와 공백 문자가 포함된 요소입니다. 이는 "tocolor-highlight", "my-class tocolor-blue" 등과 같은 요소와 일치합니다.

속성 선택기를 사용하면 필요 없이 공유 패턴을 기반으로 요소 그룹에 스타일을 적용할 수 있습니다. 장황하고 반복적인 클래스 선언에 적합합니다.

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

• [CSS 속성 선택기](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
• [CSS 속성 선택기] (https://www.w3schools.com/cssref/css_selectors.asp)

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