🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

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 有着相同的同作方式
  • :matchesCSSWG issue #3258 中被重命名为 :is

浏览器支持

  • :is 支持率:57.32%
  • :any 支持率:90.06%
  • :matches 支持率:93.66%(需前缀)

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步