媒体查询运算符“不”真的有效吗？

【问题标题】：Does the media query operator "not" actually work?媒体查询运算符“不”真的有效吗？
【发布时间】：2022-07-22 19:50:27
【问题描述】：

我实际上只想在有鼠标的 PC 上触发 :hover 效果，而不是在混合电脑（鼠标+触摸）上触发。我的查询是：

@media not (any-pointer: coarse) {
tag:hover { some effect }
}

我想说的是：将悬停应用于没有至少一个粗略指针（触摸）的 PC。但它不起作用，无论是在 chrome 还是在 firefox 或 edge 上。我错过了什么？

【问题讨论】：

我相信您必须指定媒体类型才能正常工作。

标签： css media-queries operator-keyword rules negation

【解决方案1】：

根据MDN

如果使用 not 或 only 运算符，则必须明确指定媒体类型。

此 sn-p 将屏幕添加到您问题中的媒体查询。

在没有触摸屏的笔记本电脑上，它似乎可以工作，将鼠标悬停在 div 上确实会将其更改为青色。如果将“粗略”更改为“精细”，则悬停不起作用，因为笔记本电脑的鼠标被视为精细指针。

div {
  width: 20vmin;
  height: 20vmin;
  background: pink;
}

@media not screen and (any-pointer: coarse) {
  div:hover {
    background: cyan;
  }
}

&lt;div&gt;&lt;/div&gt;

【讨论】：