initial commit

1 files changed, 198 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_colon_checked/index.html b/files/zh-cn/web/css/_colon_checked/index.html
new file mode 100644
index 0000000000..4a95ab5060
--- /dev/null
+++ b/files/zh-cn/web/css/_colon_checked/index.html
@@ -0,0 +1,198 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:checked</code></strong> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>选择器表示任何处于选中状态的<strong>radio</strong>(<code>&lt;input type="radio"&gt;</code>), <strong>checkbox </strong>(<code>&lt;input type="checkbox"&gt;</code>) 或("select") 元素中的<strong>option </strong>HTML元素("option")。</p>
+
+<pre class="brush: css">/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+} </pre>
+
+<p>用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。</p>
+
+<div class="note">
+<p><strong>Note:</strong>因为浏览器经常将<code>&lt;option&gt;</code>视为<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>,因此不同的浏览器通过<code>:checked</code>伪类渲染出来的效果也不尽相同.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">示例</h2>
+
+<h3 id="基础示例">基础示例</h3>
+
+<h3 id="Basic_example" style="display: none;">Basic example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;input type="radio" name="my-input" id="yes"&gt;
+  &lt;label for="yes"&gt;Yes&lt;/label&gt;
+
+  &lt;input type="radio" name="my-input" id="no"&gt;
+  &lt;label for="no"&gt;No&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;input type="checkbox" name="my-checkbox" id="opt-in"&gt;
+  &lt;label for="opt-in"&gt;Check me!&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;select name="my-select" id="fruit"&gt;
+  &lt;option value="opt1"&gt;Apples&lt;/option&gt;
+  &lt;option value="opt2"&gt;Grapes&lt;/option&gt;
+  &lt;option value="opt3"&gt;Pears&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div,
+select {
+  margin: 8px;
+}
+
+/* Labels for checked inputs */
+input:checked + label {
+  color: red;
+}
+
+/* Radio element, when checked */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Checkbox element, when checked */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Option elements, when selected */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Basic_example")}}</p>
+
+<h3 id="借用隐藏的checkbox来切换元素的样式（显示隐藏）">借用隐藏的checkbox来切换元素的样式（显示/隐藏）</h3>
+
+<h3 id="Toggling_elements_with_a_hidden_checkbox" style="display: none;">Toggling elements with a hidden checkbox</h3>
+
+<p>这个例子利用了<code>:checked</code>伪类，让用户基于复选框的状态切换内容，而无需使用JavaScript。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input type="checkbox" id="expand-toggle" /&gt;
+
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;&lt;th&gt;Column #1&lt;/th&gt;&lt;th&gt;Column #2&lt;/th&gt;&lt;th&gt;Column #3&lt;/th&gt;&lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;label for="expand-toggle" id="expand-btn"&gt;Toggle hidden rows&lt;/label&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Hide the toggle checkbox */
+#expand-toggle {
+  display: none;
+}
+
+/* Hide expandable content by default */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Style the button */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Show hidden content when the checkbox is checked */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Style the button when the checkbox is checked */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p>
+
+<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values"><strong>图片相册</strong></h3>
+
+<p>同时，可以使用隐藏的radioboxes中的:checked伪类来构建一个<strong>只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，</strong>查看<a href="https://developer.mozilla.org/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">演示</a>。</p>
+
+<div class="note"><strong>注:</strong> 一个类似的效果，基于<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a>伪类和没有隐藏的radioboxes，查看<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">这个演示</a>，来自<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover">:hover</a>页面。</div>
+
+<h2 id="Specifications" name="Specifications">规范</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('HTML WHATWG', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Defines the semantic regarding HTML.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Link to Selectors Level 3.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Defines the pseudo-class, but not the associated semantic</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{Compat("css.selectors.checked")}}</p>