모든 값의 속성을 사용하여 CSS 요소를 어떻게 타겟팅할 수 있나요?

CSS에서 임의 값의 속성을 사용하여 요소 타겟팅

CSS에서는 해당 속성을 기반으로 요소를 타겟팅해야 하는 경우가 많습니다. 특정 속성 값을 가진 요소를 선택하는 것은 간단하지만 임의의 속성 값을 가진 요소를 타겟팅하는 것은 더 어려울 수 있습니다.

질문: 임의 속성을 가진 요소 선택

어떻게 할 수 있습니까? 임의의 값의 속성을 갖는 대상 요소(속성이 요소에 추가되지 않은 경우 제외)? 예를 들어, "rel" 속성 값이 있는 앵커 태그를 대상으로 삼고 싶습니다.

답변: 빈 값으로 속성 선택기 사용

따라서 빈 값으로 속성 선택기를 사용할 수 있습니다. 다음 CSS 규칙은 "rel" 속성이 정의된 모든 앵커 태그를 대상으로 합니다.

a[rel] {
    color: red;
}

이 규칙은 다음 HTML의 첫 번째 및 세 번째 앵커 태그와 일치합니다.

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

업데이트: 비어 있는 값과 비어 있지 않은 값 구별

어떤 경우에는 구별이 필요할 수 있습니다. 빈 속성 값을 가진 요소와 비어 있지 않은 값을 가진 요소 사이. 이를 위해 CSS ":not" 의사 클래스를 사용할 수 있습니다.

a[rel]:not([rel=""]) {
    color: red;
}

이 규칙은 비어 있지 않은 "rel" 속성 값이 있는 앵커 태그만 대상으로 합니다.

위 내용은 모든 값의 속성을 사용하여 CSS 요소를 어떻게 타겟팅할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!