如何从 CSS 选择器中排除特定类？

如何从 CSS 选择器中排除特定类？

在 JavaScript 不可用的有限环境中工作时，CSS成为动态造型的必备工具。一个常见的挑战是，当某些元素还具有另一个类时，如何防止它们受到特定 CSS 规则的影响。

为了说明这一点，请考虑更改元素背景颜色的任务悬停时除非它也具有“reMode_selected”类。以下代码演示了实现此目的的尝试：

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

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

但是，此方法会失败，因为它的目标元素同时具有“reMode_hover”和“reMode_selected”类，无论悬停事件是否发生被触发。要解决此问题，必须使用不带空格的多类选择器（后代选择器）：

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

此选择器使用“:not”伪类从“reMode_selected”类中排除元素将鼠标悬停在“reMode_hover”元素上时的背景颜色样式。

以上是如何从 CSS 选择器中排除特定类？的详细内容。更多信息请关注PHP中文网其他相关文章！