css4 匹配任何伪类

Author Avatar
tanglijun 3月 12, 2017

css4 匹配任何伪类

匹配任何伪类

这个伪类叫做匹配任何伪类,它的参数是一个选择器列表(组合选择器无效)。它能使你通过制定匹配所有包含的选择器组来创建选择器集合。但是它不能嵌套自己,比如像这样:E:matches(:matches(F))

语法

:matches(selector1[, selector2, …]) {}

示例

:matches(selector1[, selector2, …]) {}

示例

section h1, article h1, aside h1 {
    color: red;
}

/* 等同于 */

:matches(section, article, aside) h1 {
    color: red;
}

/* 注意:Mozilla 和 Webkit 需要添加他们自己的前缀:-prefix-any */
:-moz-any(section, article, aside) h1,
:-webkit-any(section, article, aside) h1{
    color: red;
}

这个示例用 :matches 选择器选择所有 section,article,aside 的子元素 h1。

浏览器支持情况

http://caniuse.com/#feat=css-matches-pseudo

参考资料

许可协议:署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
本文链接:https://tanglj.cn/2017/03/12/css4-matches-any-pseudo-class/