相关疑难解决方法(0)

我想为支持悬停的浏览器(例如桌面浏览器)和不支持悬停的浏览器(例如触摸屏设备)提供单独的行为.具体来说,我想在支持它的浏览器上声明悬停状态,但不支持那些不支持浏览器的浏览器,以避免移动浏览器使用额外的点击模拟它,因为这会打破页面上的其他交互 - 通过不定义悬停这些浏览器的状态可以避免.

我已经阅读了" 交互媒体查询"功能,看起来它应该可以解决问题.我可以做类似的事情:

@media (hover: none) {
  /* behaviour for touch browsers */
}

根据CanIUse,除了IE11和Firefox之外,它还支持我需要支持的所有浏览器.

所以我想知道我是否可以反过来做 - 因为主要的触控设备都支持它,然后否定它:

@media not (hover: none) {
  /* behaviour for desktop browsers */
}

但是,这似乎根本不起作用.

我正在尝试做的伪代码示例:

.myelement {
  /* some styling */
  /* note: no hover state here */
}
@media(this device supports hover) {
  .myelement:hover {
    /* more styling */
  }
}

那么,有没有办法让这项工作按照预期的方式进行,或者我是否走错了轨道？

我一直试图弄清楚是否有可能嵌套CSS特征查询(也称为"CSS @supports")和常规媒体查询,以及这样做的正确方法.

示例A显示了媒体查询中的功能查询.
示例B显示了要素查询中的媒体查询.

它甚至可以嵌套它们吗？如果是这样,是否有一种首选的嵌套方式？A还是B？

.foo {
    background: red;
}

/* EXAMPLE A */
@media (min-width: 50em) {
    .foo {
        background: green;
    }

    @supports (flex-wrap: wrap) {
        .foo {
            background: blue;
        }
    }
}

/* EXAMPLE B */
@supports (flex-wrap: wrap) {
    .foo {
        background: green;
    }

    @media (min-width: 50em) {
        .foo {
            background: blue;
        }
    }
}

我正在尝试否定max-device-width媒体查询（这样做的原因是我不会两者兼而有之(max-device-width: X)，(min-device-width: X)如果设备恰好具有该宽度则触发）。不幸的是，not (min-or-max-some-width: X)媒体查询永远不会触发。

这是一个小小提琴。我希望桌面上有两条黄线，移动设备上有两条红线。我得到的是桌面上只有一条黄线（最后一条），而移动设备上只有一条红线（第一条）。

我究竟做错了什么？