CSS는 모든 속성 값을 사용하여 요소를 대상으로 지정할 수 있나요?

단순한 CSS 속성 값 타겟팅

웹 페이지 스타일링 영역에서 CSS 속성은 HTML 요소의 모양과 동작을 정의하는 데 중추적인 역할을 합니다. 특정 속성 값이 있는 요소를 대상으로 지정해야 하는 상황에 자주 직면하지만, 해당 값에 관계없이 모든 속성 세트가 있는 요소에 스타일을 적용해야 하는 경우에는 어떻게 해야 합니까?

CSS가 속성이 있는 요소를 대상으로 지정할 수 있나요? 어떤 값이 있습니까?

어떤 값의 속성을 가진 요소를 선택할 수 있는지 묻는 질문을 살펴보겠습니다. 다음 HTML 코드를 상상해 보세요.

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

목표는 첫 번째와 세 번째 CSS를 사용하여 빨간색 텍스트로 태그를 만듭니다. 직관적으로 다음과 같이 시도해 볼 수 있습니다.

a[rel=*]
{
  color: red;
}

그러나 이 선택기는 작동하지 않습니다. 다행히도 대체 솔루션이 있습니다.

범용 속성 선택기

단일 대괄호([ ])로 표시되는 CSS 범용 속성 선택기는 지정된 속성 세트가 있는 모든 요소와 일치합니다. 그 가치에 관계없이. 목적에 맞게 다음을 사용할 수 있습니다.

a[rel]
{
  color: red;
}

이 선택기는 모든 rel 속성이 있는 태그, 원하는 텍스트에 빨간색을 적용합니다.

빈 속성 값 처리

어떤 경우에는 비어 있는 속성 값과 비어 있지 않은 속성 값을 구별해야 할 수도 있습니다. 여기에서 :not() 의사 클래스가 유용하게 사용됩니다. :not()을 사용하면 속성 값이 비어 있는 요소를 제외하여 보다 정확한 타겟팅이 가능합니다.

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

이 향상된 선택기는 비어 있지 않은 rel 속성이 있는 태그는 스타일 변경의 영향을 받습니다.

자, 여기까지입니다. CSS 범용 속성 선택을 사용하면 속성이 정의된 요소를 쉽게 대상으로 지정하여 스타일을 더욱 다양하고 적응력 있게 만들 수 있습니다.

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