initial commit

1 files changed, 111 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_colon_not/index.html b/files/zh-cn/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..e22026a5af
--- /dev/null
+++ b/files/zh-cn/web/css/_colon_not/index.html
@@ -0,0 +1,111 @@
+---
+title: ':not()'
+slug: 'Web/CSS/:not'
+tags:
+  - CSS
+  - Web
+  - 伪类
+  - 参考
+translation_of: 'Web/CSS/:not'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/zh-CN/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类</a> <strong><code>:not()</code></strong> 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为<em>反选伪类</em>（<em>negation pseudo-class</em>）。</p>
+
+<pre class="brush: css no-line-numbers">/* 选择所有不是段落（p）的元素 */
+:not(p) {
+  color: blue;
+}</pre>
+
+<div class="note">
+<p><strong>注意：</strong></p>
+
+<ul>
+ <li><code>:not()</code> 伪类不能被嵌套，这意味着 <code>:not(:not(...))</code> 是无效的。</li>
+ <li>由于伪元素不是简单的选择器，他们不能被当作 <code>:not()</code> 中的参数，形如 <code>:not(p::before)</code> 这样的选择器将不会工作。</li>
+ <li>可以利用这个伪类写一个完全没有用处的选择器。例如， <code>:not(*)</code> 匹配任何非元素的元素，因此，这个规则将永远不会被应用。</li>
+ <li>可以利用这个伪类提高规则的<a href="/zh-CN/docs/Web/CSS/Specificity">优先级</a>。例如， <code>#foo:not(#bar)</code> 和 <code>#foo</code> 会匹配相同的元素，但是前者的优先级更高。</li>
+ <li><code>:not(.foo)</code> 将匹配任何非 <code>.foo</code> 的元素，<em>包括 {{HTMLElement("html")}} 和 {{HTMLElement("body")}}</em>。</li>
+ <li>这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， <code>body :not(table) a</code> 依旧会应用到表格元素 {{HTMLElement("table")}} 内部的 {{HTMLElement("a")}} 上, 因为 {{HTMLElement("tr")}}将会被 <code>:not(table)</code> 这部分选择器匹配。</li>
+</ul>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<p><code>:not()</code> 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或 <a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a>。</p>
+
+<div class="warning">
+<p>以逗号分隔的选择器列表作为参数是实验性的，尚未获得广泛支持。</p>
+</div>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;我是一个段落。&lt;/p&gt;
+&lt;p class="fancy"&gt;我好看极了！&lt;/p&gt;
+&lt;div&gt;我「不是」一个段落。&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* 类名不是 `.fancy` 的 &lt;p&gt; 元素 */
+p:not(.fancy) {
+  color: green;
+}
+
+/* 非 &lt;p&gt; 元素 */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* 既不是 &lt;div&gt; 也不是 &lt;span&gt; 的元素 */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
+/* 注意，此语法尚未获广泛支持。 */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>拓展标准，以允许使用一些复杂的选择器。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初始定义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页面上的兼容性表格是从结构化的数据自动生成的。如果你想贡献数据，请看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们来一发 pull request。</div>
+
+<p>{{Compat("css.selectors.not")}}</p>