CSS 선택기를 사용하여 유사한 클래스 이름으로 여러 Div의 스타일을 지정하려면 어떻게 해야 합니까?

CSS 클래스에서 와일드카드 활용

쿼리에서 고유 식별자(예: tocolor-1)를 포함하면서 공통 클래스 "tocolor"를 사용하여 여러 div의 스타일을 지정하는 것을 목표로 합니다. , tocolor-2). CSS에서 와일드카드 "*"를 사용하여 이를 단순화하려고 시도했지만 성공하지 못했습니다.

원하는 결과를 얻기 위해 CSS에 속성 선택기를 도입했습니다. 속성 선택기를 사용하면 클래스 값과 같은 특정 속성을 기반으로 요소를 대상으로 지정할 수 있습니다.

귀하의 시나리오에서는 다음 CSS 선택기를 활용할 수 있습니다.

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

작동 방식은 다음과 같습니다.

• [class^="tocolor-"]: 이 선택기는 클래스 속성이 다음으로 시작하는 요소와 일치합니다. "tocolor-".
• [class*=" tocolor-"]: 이 선택기는 클래스 속성에 "tocolor-"가 문자열 내 어느 위치에나 있고 앞에 공백 문자가 있는 요소와 일치합니다.

이 두 선택기를 결합하면 이러한 기준 중 하나를 충족하는 클래스로 모든 요소를 ​​타겟팅할 수 있습니다.

예를 들어 다음 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>

위의 CSS 선택기를 적용하면 모든 div의 색상이 빨간색으로 설정됩니다.

JSFiddle에서 이 대화형 데모를 확인하세요: http://jsfiddle.net/K3693 /1/

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

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

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