CSS 선택기에서 특정 클래스 이름을 제외하는 방법은 무엇입니까?

CSS 선택기에서 특정 클래스 이름 제외

CSS에서는 선택기에서 특정 클래스 이름을 제외해야 하는 경우가 있습니다. 이는 여러 요소에 스타일을 적용하려고 하지만 특정 요소가 해당 스타일을 상속해서는 안 되는 경우에 특히 유용합니다.

일반적인 시나리오 중 하나는 다른 클래스 이름을 가진 요소에 스타일을 적용하면서 특정 클래스 이름을 가진 요소를 제외하는 것입니다. 다음 예를 고려해 보겠습니다.

<code class="html"><a href="" title="Design" class="reMode_design reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" class="reMode_design reMode_hover reMode_selected">
    <span>Design</span>
</a></code>

이 예에서는 마우스를 올리면 클래스 이름이 "reMode_hover"인 요소에 배경색을 적용하려고 합니다. 그러나 요소에 "reMode_selected" 클래스 이름도 있으면 이 색상을 적용하고 싶지 않습니다.

<code class="css">/* Do not apply background-color (leave empty) */
.reMode_selected .reMode_hover:hover { }

.reMode_hover:hover { background-color: #f0ac00; }</code>

첫 번째 규칙이 작동할 것으로 예상할 수도 있지만 그렇지 않습니다. 이는 CSS에서 클래스 이름 사이의 공백이 하위 선택자를 나타내기 때문입니다. 따라서 ".reMode_selected .reMode_hover"는 ".reMode_selected의 자손인 .reMode_hover 요소 선택"으로 번역됩니다.

"reMode_selected" 요소를 올바르게 제외하려면 "not()" 선택기를 사용해야 합니다. 업데이트된 CSS는 다음과 같습니다.

<code class="css">.reMode_hover:not(.reMode_selected):hover { background-color: #f0ac00; }</code>

이 규칙은 .reMode_selected 클래스 이름이 없는 .reMode_hover 요소에 배경색을 적용합니다. 결과적으로 마우스를 올리면 첫 번째 링크에만 배경색이 적용되고 두 번째 링크에는 적용되지 않습니다.

위 내용은 CSS 선택기에서 특정 클래스 이름을 제외하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!