path: root/files/zh-cn/web/css/_colon_is/index.html

---
title: ':is() (:matches(), :any())'
slug: 'Web/CSS/:is'
tags:
  - ':is'
  - CSS
  - Pseudo-class
  - Reference
  - Selectors
  - Web
  - 伪类
translation_of: 'Web/CSS/:is'
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<div class="blockIndicator note">
<p><strong>注意</strong>: 在 <a href="https://github.com/w3c/csswg-drafts/issues/3258">CSSWG issue #3258</a> 讨论后 <code>:match()</code> 改名为 <code>:is()</code>。</p>
</div>

<p>The <strong><code>:is()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类</a> 函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。</p>

<div>
<p>注意，许多浏览器通过一个更旧的、带前缀的伪类:any()来支持这个功能，包括旧版本的Chrome、Firefox和Safari。这与<code>:is()</code>的工作方式完全相同，只是它需要厂商前缀，不支持<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">复杂的选择器。</a></p>
</div>

<pre class="brush: css no-line-numbers">/* 选择header, main, footer里的任意一个悬浮状态的段落(p标签) */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

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


/* 向后兼容的版本:-*-any()
<code> (It is not possible to group selectors into single rule,
   because presence of invalid selector would invalidate whole rule.)</code>*/
<code>:-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;
}</code></pre>

<h2 id="语法">语法</h2>

{{CSSSyntax}}

<h2 id="示例">示例</h2>

<h3 id="Cross-browser_example">Cross-browser example</h3>

<pre class="brush: html">&lt;header&gt;
  &lt;p&gt;This is my header paragraph&lt;/p&gt;
&lt;/header&gt;

&lt;main&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;p&gt;This is my first&lt;/p&gt;&lt;p&gt;list item&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;p&gt;This is my second&lt;/p&gt;&lt;p&gt;list item&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/main&gt;

&lt;footer&gt;
  &lt;p&gt;This is my footer paragraph&lt;/p&gt;
&lt;/footer&gt;</pre>

<pre>:-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;
}</pre>

<pre class="brush: js">let matchedItems;

try {
  matchedItems = document.querySelectorAll(':is(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 :is() or :any()');
    }
  }
}

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

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

<p>{{EmbedLiveSample('Cross-browser_example', '100%', '300')}}</p>

<h3 id="简化列表选择器">简化列表选择器</h3>

<p><code>:is()</code> 伪类可以大大简化CSS选择器。例如，下面的CSS:</p>

<pre class="brush: 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;
}
</pre>

<p>... 可以被替换为:</p>

<pre class="brush: css">/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}</pre>

<p>但是，不要像下面那么做: (参见 <a href="#Issues_with_performance_and_specificity">the section on performance</a> 。)</p>

<pre class="brush: css">:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}</pre>

<h3 id="Notes" name="Notes">Simplifying section selectors</h3>

<p><code>:is</code> 伪类在处理HTML5 <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections and headings</a>特别有用。 由于 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}},  {{HTMLElement("nav")}} 经常嵌套在一起, 没有 <code>:is()</code>的话匹配其他元素将会很棘手。</p>

<p>例如, 在没有 <code>:is()</code>的情况下, 在不同深度对所有{{HTMLElement("h1")}} 素进行样式化可能非常复杂:</p>

<pre class="brush: css">/* 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! */
</pre>

<p>使用 <code>:is()</code>之后,它变的非常简单:</p>

<pre class="brush: css">/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:is(section, article, aside, nav)
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 15px;
}</pre>

<h3 id="Avoiding_selector_list_invalidation">Avoiding selector list invalidation</h3>

<p>Unlike <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Selector_list">selector lists</a>, the <code>:is()</code> pseudo-class doesn't get invalidated when one of the selectors passed to it isn't supported by the browser.</p>

<pre><code>:is(:valid, :unsupported) {
  ...
}</code></pre>

<p>Will still parse correctly and match <code>:valid</code> even in browsers which don't support <code>:unsupported</code>, whereas:</p>

<pre><code>:valid, :unsupported {
  ...
}</code></pre>

<p>Will be ignored in browsers which don't support <code>:unsupported</code> even if they support <code>:valid</code>.</p>

<h2 id="Notes_2">Notes</h2>

<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">any(): — Issues with performance and specificity</h3>

<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> tracks an issue with Gecko where the specificity of <code>:-moz-any()</code> is incorrect. The current (as of Firefox 12) implementation puts <code>:-moz-any()</code> 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.</p>

<p>For example:</p>

<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
</pre>

<p>... is slower than:</p>

<pre class="brush: css">.a &gt; .b, .a &gt; .c
</pre>

<p>... and the following is fast:</p>

<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c</pre>

<p><code>:is()</code> aims to fix such problems.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#matches", ":is()")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<div>


<p>{{Compat("css.selectors.is")}}</p>
</div>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - Like <code>:is()</code>, but with 0 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Specificity">specificity</a>.</li>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Selector_list">Selector list</a></li>
</ul>

<ul>
 <li><a href="/en-US/docs/Web/Web_Components">Web components</a></li>
</ul>