@supports selector（）

@supports规则检查选择器支持的能力令人惊讶地强大！虽然经常用于测试property: value对兼容性，但selector()函数扩展了评估选择器支持的功能。这是通过简单地将选择器放置在括号中来完成的：

 @supports选择器（：nth-​​child（.foo）1）{
  / *如果支持选择器，则应用样式 */
}

:nth-child(n of .foo)选择器，“选择器列表参数”与:nth-child家族选择器兼容，是一个很好的例子。当前，只有Safari支持此特定选择器。

考虑一个场景，您需要在其中设置带有分离器和斑马条纹的列表。理想情况下，您将使用这样的选择来实现斑马条纹，同时忽略分离器：

 li：nth-​​child（.list-item的奇数）{
  背景：Lightgoldenrodolow；
}

但是，由于浏览器的支持有限，您可以使用@supports来有条件地应用这种样式：

 @supports选择器（：nth-​​child（.foo）1）{
  li {
    填充：0.25EM；
  }
  li：nth-​​child（.list-item的奇数）{
    背景：Lightgoldenrodolow；
  }
  li.Separator {
    列表风格：无；
    保证金：0.25EM 0;
  }
}
@supports不是selector（：nth-​​child（.foo））{
  li.Separator {
    身高：1px;
    列表风格：无；
    边界：1px虚拟紫色；
    保证金：0.25EM 0;
  }
}

这为缺乏支持高级选择器的浏览器提供了后备样式。改进的语法可能会使用@when @else时，可以简化这一点：

 / *假设的未来语法 */
@when supports（selector（：nth-​​child（.foo）1））{
  / *用于支撑浏览器的样式 */
} @别的 {
  / *后备样式 */
}

还存在用于测试选择器支持的JavaScript API：

 css.supports（“选择器（：nth-​​child（.foo）1）”）

此方法在Safari中true ，在Chrome中（在撰写false时）。

尽管@supports规则具有强大的功能，但具有不一致的跨浏览器支持的CSS选择器的数量，并且需要@Supports的用例@supports的数量相对较小。现在，许多以前有问题的选择器，例如::marker和对案例不敏感的属性选择器，现在都可以享有广泛的支持。选择器如:fullscreen或:-webkit-full-screen可能会提供有趣且有用的应用程序，因为它们在iOS Safari中缺乏支持。

以上是@supports selector（）的详细内容。更多信息请关注PHP中文网其他相关文章！