CSS 视觉 - :is/:matches/:any 选择器

2019-11-25

描述

:is 将选择器列表作为参数，可以选中该列表中的与之匹配的任何元素。这样紧凑的写法对有含有很多选择器的样式非常有用。

HTML

<header>
  <p>This is my header paragraph</p>
</header>
<main>
  <ul>
    <li><p>This is my first</p><p>list item</p></li>
  </ul>
</main>
<footer>
  <p>This is my footer paragraph</p>
</footer>

CSS

:-webkit-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:-moz-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

Demo

说明

• 当前浏览器，包含旧版本的 Chrome，Firefox 和 Safari 使用 :matches 或更早的带有前缀的伪类 :any 对该功能进行支持
• :any 除了需要前缀和不支持复杂的选择器外，和 :matches / :is 有着相同的同作方式
• :matches 在 CSSWG issue #3258 中被重命名为 :is

浏览器支持

• :is 支持率：57.32%
• :any 支持率：90.06%
• :matches 支持率：93.66%（需前缀）

返回总目录

每天 30 秒系列之 CSS