CSS는 속성 값을 기반으로 HTML 요소를 타겟팅할 수 있나요?

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

CSS에서는 그림과 같이 특정 속성을 기반으로 요소를 타겟팅할 수 있습니다. 아래 예는 다음과 같습니다.

input[type=text] {
    font-family: Consolas;
}

그러나 일반적인 질문이 발생합니다. 요소를 기반으로 타겟팅할 수 있습니까? 속성값? 이 기사에서는 이 주제를 살펴봅니다.

속성 선택기 사용

속성 값이 있는 요소를 대상으로 지정하려면 속성 선택기를 사용할 수 있습니다. 속성 이름 뒤의 값을 생략하면 해당 속성을 가진 모든 요소가 선택됩니다. 예를 들면 다음과 같습니다.

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>

이 동작은 기본 커서를 반영합니다. 포인터 스타일이 정의된 href 속성이 있는 태그.

빈 속성 값 처리

어떤 경우에는 비어 있는 속성 값과 비어 있지 않은 속성 값을 구별해야 할 수도 있습니다. 이는 속성 선택기와 함께 :not 의사 클래스를 사용하여 달성할 수 있습니다.

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

이 규칙은 값이 비어 있는 태그(예: 값이 없는 태그)를 제외하고 rel 속성이 있는 모든 앵커 태그를 대상으로 합니다. 지정됨).

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