initial commit

1 files changed, 285 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_colon_is/index.html b/files/zh-cn/web/css/_colon_is/index.html
new file mode 100644
index 0000000000..494785a89a
--- /dev/null
+++ b/files/zh-cn/web/css/_colon_is/index.html
@@ -0,0 +1,285 @@
+---
+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>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<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>