Question

我试图仅将:hover应用于网页的桌面访问者，并将:active应用于其他网页。我将mobile类设置为触摸屏设备版本上的body元素，并将这些行放在CSS中以用于文档中的按钮（带有btn类的元素）：

.btn {
    background: blue;
    color: white;
    border-color: white;
}
:not(.mobile) .btn:hover {
    background: red;
    color: blue;
    border-color: black;
}
.mobile .btn:active {
    background: red;
    color: blue;
    border-color: black;
}

以下是此移动网页的编码方式示例：

<html>
  <body class="mobile">
    <h1>TITLE</h1>
    <div class="btn">button</div>
  </body>
</html>

问题在于，在移动页面上浏览时，即使按钮是mobile类的主体的子级，也仍然选择了：hover伪类！我误解了:not(.mobile) .btn:hover吗？

我认为它应该选择任何具有btn类并且正在被悬停并且是不具有mobile类的元素的子元素的直接/远距离元素... < / p>

我还尝试了其他解决方案，例如媒体查询，但我无法让它们按预期工作。

小提琴：https://jsfiddle.net/162tn8ko/

感谢您阅读我的英语不好

Answer 1

现在，该选择器正在将html元素与div.btn的子元素进行匹配。要确保它是直子，请使用>。

.btn, .btn_noborder {
	background: blue;
	color: white;
	border-color: white;
}

/* note the following line */
:not(.mobile) > .btn:hover, :not(.mobile) > .btn_noborder:hover {
	background: red;
	color: blue;
	border-color: black;
}
.mobile .btn_noborder:active, .mobile .btn:active {
	background: red;
	color: blue;
	border-color: black;
}

<html>
  <body class="mobile">
    <h1>TITLE</h1>
    <div class="btn_noborder">button</div>
  </body>
</html>

Answer 2

谢谢jhpratt，您的回答使我明白了：not确实适用于html元素。正如Temani Afif猜测的那样，在我的代码中btn不是身体的直接子代；但是这就是我想要的：

body:not(.mobile) .btn:hover { ... }

完整的解决方案：https://jsfiddle.net/162tn8ko/6/

CSS：：not选择器作为父选择器+：将鼠标悬停在类误解上

2 个答案: