CSS 와일드카드가 고유 식별자를 사용하여 동적 클래스의 스타일을 간소화할 수 있습니까?

동적 클래스 스타일링을 위해 CSS 와일드카드 활용

HTML 요소 스타일을 지정할 때 기본 클래스와 함께 고유 식별자를 만나는 것이 일반적입니다. 제공된 시나리오에서는 여러 div의 스타일이 "tocolor" 클래스를 사용하여 지정되었지만 각 div에는 "tocolor-1", "tocolor-2" 등과 같은 추가 고유 식별자가 필요합니다.

질문 발생: CSS 선택기에서 와일드카드()를 사용하여 이를 간소화하는 방법이 있나요? ".tocolor-"을 사용한 초기 시도에서는 결과가 나오지 않았습니다.

해결책은 속성 선택기를 활용하는 것입니다. 속성 선택기를 사용하면 클래스와 같은 속성을 기반으로 요소를 대상으로 지정할 수 있습니다. 이 경우 다음 선택기는 원하는 효과를 달성합니다.

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

"[class^="tocolor-"]" 선택기는 클래스 속성이 "tocolor-"로 시작하는 요소를 대상으로 하며, " [class*=" tocolor-"]" 선택기는 클래스 속성에 공백 문자 뒤에 하위 문자열 "tocolor-"가 포함된 요소를 대상으로 합니다.

선택기:

• "[class^="tocolor-"]": "tocolor-1," "tocolor-와 같이 "tocolor-"로 시작하는 클래스 속성과 요소를 일치시킵니다. 2," 등.
• "[class*=" tocolor-"]": 바로 앞에 하위 문자열 "tocolor-"가 포함된 클래스 속성이 있는 요소와 일치합니다. "tocolor-1", "test tocolor-2" 등과 같은 공백 문자.

이러한 속성 선택기를 활용하면 서로 다른 고유성을 지닌 여러 요소에 원하는 스타일을 적용할 수 있습니다. 단일 클래스 선택기를 사용하는 식별자. 이는 CSS 코드를 단순화하고 유지 관리성을 향상시킵니다.

위 내용은 CSS 와일드카드가 고유 식별자를 사용하여 동적 클래스의 스타일을 간소화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!