我尝试仅在网页的桌面访问者上应用: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类的元素的子元素......
我还尝试了其他解决方案，例如媒体查询，但我无法让它们按预期工作。
小提琴：https://jsfiddle.net/162tn8ko/
谢谢你读我糟糕的英语
现在，该选择器正在将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>谢谢 jhpratt，您的回答帮助我理解 ：not(s( 确实应用于html元素。正如Temani Afif所猜测的那样，在我的代码中，btn不是身体的直接子代;但这是我正在寻找的：
body:not(.mobile) .btn:hover { ... }
完整解决方案 ： https://jsfiddle.net/162tn8ko/6/