initial commit

1 files changed, 173 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_colon_disabled/index.html b/files/zh-cn/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..75fdcefd03
--- /dev/null
+++ b/files/zh-cn/web/css/_colon_disabled/index.html
@@ -0,0 +1,173 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+translation_of: 'Web/CSS/:disabled'
+---
+<p>{{ CSSRef() }}</p>
+
+<p><code>:disabled</code>  CSS <a href="/zh-CN/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。</p>
+
+<p> </p>
+
+<pre class="brush: css no-line-numbers">/* Selects any disabled &lt;input&gt; */
+input:disabled {
+  background: #ccc;
+}</pre>
+
+<p> </p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>这个例子显示基本的购物表单。通过使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> {{event("change")}} 事件让用户启用/禁用付款字段。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset id="shipping"&gt;
+    &lt;legend&gt;Shipping address&lt;/legend&gt;
+    &lt;input type="text" placeholder="Name"&gt;
+    &lt;input type="text" placeholder="Address"&gt;
+    &lt;input type="text" placeholder="Zip Code"&gt;
+  &lt;/fieldset&gt;
+  &lt;br&gt;
+  &lt;fieldset id="billing"&gt;
+    &lt;legend&gt;Billing address&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;Same as shipping address:&lt;/label&gt;
+    &lt;input type="checkbox" id="billing-checkbox" checked&gt;
+    &lt;br&gt;
+    &lt;input type="text" placeholder="Name" disabled&gt;
+    &lt;input type="text" placeholder="Address" disabled&gt;
+    &lt;input type="text" placeholder="Zip Code" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="text"]:disabled {
+  background: #ccc;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">// Wait for the page to finish loading
+document.addEventListener('DOMContentLoaded', function () {
+  // Attach `change` event listener to checkbox
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // Select the billing text fields
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // Toggle the billing text fields
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample('示例', 300, 250)}}</p>
+
+<p> </p>
+
+<h2 id="规范">规范</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('HTML WHATWG', '#selector-disabled', ':disabled') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-disabled', ':disabled') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Defines the semantic regarding HTML and forms.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#enableddisabled', ':disabled') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 UI', '#pseudo-classes', ':disabled') }}</td>
+   <td>{{ Spec2('CSS3 UI') }}</td>
+   <td>Link to Selectors Level 3.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#enableddisabled', ':disabled') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Defines the pseudo-class, but not the associated semantic.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>
+  <p>{{ Cssxref(":enabled") }}</p>
+ </li>
+</ul>