CSS3 와일드카드 선택기가 특정 문자열로 시작하는 클래스 이름을 가진 요소를 대상으로 지정할 수 있습니까?

클래스 이름 접두사를 위한 CSS3 와일드카드 선택기

와일드카드 선택기를 사용하여 특정 문자열로 시작하는 클래스 이름을 가진 요소를 선택할 수 있습니까? CSS3에서? 예를 들어 다음 요소가 있습니다.

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

CSS를 사용하여 모든 div의 색상을 한 번에 빨간색으로 설정할 수 있습니까?

대답은 '예'입니다. 이를 달성하려면 와일드카드 문자와 함께 다음 CSS 선택기를 사용할 수 있습니다.

div[class^='myclass'], div[class*=' myclass'] {
    color: #F00;
}

^(캐럿) 선택기는 클래스 속성 값이 지정된 문자열로 시작하는 요소와 일치합니다. 이 경우 클래스 이름이 "myclass-"로 시작하는 요소와 일치합니다.

*(별표) 선택기는 클래스 속성 값에 지정된 문자열이 포함된 요소와 일치합니다. 여기에는 클래스 이름이 여러 개 있는 요소가 포함되며 그 중 하나는 "myclass-"로 시작합니다.

이러한 선택기를 결합하면 문자열 "myclass-"로 시작하거나 포함하는 클래스 이름을 가진 모든 요소를 ​​타겟팅할 수 있습니다. . 이를 통해 CSS 코드 한 줄에서 색상을 빨간색으로 설정할 수 있습니다.

위 내용은 CSS3 와일드카드 선택기가 특정 문자열로 시작하는 클래스 이름을 가진 요소를 대상으로 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!