The :matches() CSS 伪类 函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。

注意,许多浏览器通过一个更旧的、带前缀的伪类:any()来支持这个功能,包括旧版本的Chrome、Firefox和Safari。这与:matches()的工作方式完全相同,只是它需要厂商前缀,不支持复杂的选择器。

/* 选择header, main, footer里的任意一个悬浮状态的段落(p标签) */
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 以上内容相当于以下内容 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}


/* 向后兼容的版本:-*-any() */
:-moz-any(header, main, footer) p:hover,
:-webkit-any(header, main, footer) p:hover,
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

Syntax

:is( <complex-selector-list> )

where
<complex-selector-list> = <complex-selector>#

where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i

Examples

Cross-browser example

<header>
  <p>This is my header paragraph</p>
</header>

<main>
  <ul>
    <li><p>This is my first</p><p>list item</p></li>
    <li><p>This is my second</p><p>list item</p></li>
  </ul>
</main>

<footer>
  <p>This is my footer paragraph</p>
</footer>
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

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

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

try {
  matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
} catch(e) {
  try {
    matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
  } catch(e) {
    try {
      matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
    } catch(e) {
      console.log('Your browser doesn\'t support :matches() or :any()');
    }
  }
}

for(let i = 0; i < matchedItems.length; i++) {
  applyHandler(matchedItems[i]);
}

function applyHandler(elem) {
  elem.addEventListener('click', function(e) {
    alert('这是一个包含于' + e.target.parentNode.nodeName + '的段落');
  });
}

Simplifying list selectors

:matches() 伪类可以大大简化CSS选择器。例如,下面的CSS:

/* 3-deep (or more) unordered lists use a square */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

... 可以被替换为:

/* 3-deep (or more) unordered lists use a square */
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
  list-style-type: square;
}

但是,不要像下面那么做: (参见 the section on performance 。)

:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
  list-style-type: square;
}

Simplifying section selectors

:matches 伪类在处理HTML5 sections and headings特别有用。 由于 <section>, <article>, <aside><nav> 经常嵌套在一起, 没有 :matches()的话匹配其他元素将会很棘手。

例如, 在没有 :matches()的情况下, 在不同深度对所有<h1> 素进行样式化可能非常复杂:

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}
/* Level 3 */
/* ... don't even think about it! */

使用 :matches()之后,它变的非常简单:

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:matches(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:matches(section, article, aside, nav)
:matches(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:matches(section, article, aside, nav)
:matches(section, article, aside, nav)
:matches(section, article, aside, nav) h1 {
  font-size: 15px;
}

Notes

any(): — Issues with performance and specificity

Bug 561154 tracks an issue with Gecko where the specificity of :-moz-any() is incorrect. The current (as of Firefox 12) implementation puts :-moz-any() in the category of universal rules, meaning using it as the rightmost selector will be slower than using an ID, class, or tag as the rightmost selector.

For example:

.a > :-moz-any(.b, .c)

... is slower than:

.a > .b, .a > .c

... and the following is fast:

:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c

:matches() aims to fix such problems.

Specifications

Specification Status Comment
Selectors Level 4
:matches()
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 66
Full support 66
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-any
Edge Full support 15
Full support 15
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: :-ms-matches
Firefox Full support 4
Alternate Name
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :-moz-any
IE No support NoOpera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-any
Safari Full support 9
Full support 9
Full support 5
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-any
WebView Android Full support 66
Full support 66
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-any
Chrome Android Full support 66
Full support 66
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-any
Edge Mobile No support NoFirefox Android Full support 4
Alternate Name
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :-moz-any
Opera Android Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-any
Safari iOS Full support 9
Full support 9
Full support 5
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-any
Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Uses a non-standard name.
Uses a non-standard name.

See also

文档标签和贡献者

此页面的贡献者: ExE-Boss, Ritr
最后编辑者: ExE-Boss,