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

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

CSS를 사용하면 개발자가 속성을 기반으로 특정 요소를 선택할 수 있습니다. 사전 정의된 속성 값을 사용하여 요소를 타겟팅하는 것은 간단하지만 이를 모든 속성 값으로 확장하는 것은 어려울 수 있습니다.

문제 설명

모든 속성 값이 있는 요소를 선택할 수 있습니까? 유사:

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>

해결책

비어 있지 않은 속성 값을 대상으로 지정하려면 다음 선택기를 사용하세요.

a[rel]
{
    color: red;
}

이 선택기는 모든 앵커 태그를 'rel' 속성과 일치시킵니다.

비어 있는 항목 처리 값

그러나 비어 있는 속성 값과 비어 있지 않은 속성 값을 구별해야 하는 경우에는 CSS ':not' 의사 클래스를 도입하세요.

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

이 선택기는 비어 있지 않은 'rel' 속성이 있는 앵커 태그를 선택하세요.

추가 참고

기본적으로 'href' 속성이 있는 HTML 앵커 태그에는 '커서: 포인터' 스타일이 적용됩니다. 이 기능은 속성 값의 존재 여부에 따라 요소를 선택할 수 있는 가능성을 강조합니다.

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