initial commit

1 files changed, 230 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/attribute_selectors/index.html b/files/zh-cn/web/css/attribute_selectors/index.html
new file mode 100644
index 0000000000..d0370c483d
--- /dev/null
+++ b/files/zh-cn/web/css/attribute_selectors/index.html
@@ -0,0 +1,230 @@
+---
+title: 属性选择器
+slug: Web/CSS/Attribute_selectors
+tags:
+  - Atttribute
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <strong>属性选择器</strong>通过已经存在的属性名或属性值匹配元素。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 存在title属性的&lt;a&gt; 元素 */
+a[title] {
+  color: purple;
+}
+
+/* 存在href属性并且属性值匹配"https://example.org"的&lt;a&gt; 元素 */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* 存在href属性并且属性值包含"example"的&lt;a&gt; 元素 */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* 存在href属性并且属性值结尾是".org"的&lt;a&gt; 元素 */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* 存在class属性并且属性值包含以空格分隔的"logo"的&lt;a&gt;元素 */
+a[class~="logo"] {
+  padding: 2px;
+}</pre>
+
+<h2 id="语法">语法</h2>
+
+<dl>
+ <dt><code>[<var>attr</var>]</code></dt>
+ <dd>表示带有以 <var>attr</var> 命名的属性的元素。</dd>
+ <dt><code>[<var>attr</var>=<var>value</var>]</code></dt>
+ <dd>表示带有以 <var>attr</var> 命名的属性，且属性值为 <var>value</var> 的元素。</dd>
+ <dt><code>[<var>attr</var>~=<var>value</var>]</code></dt>
+ <dd>表示带有以 <var>attr</var> 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 <var>value</var>。</dd>
+ <dt><code>[<var>attr</var>|=<var>value</var>]</code></dt>
+ <dd>表示带有以 <var>attr</var> 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"<code>-</code>"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。</dd>
+ <dt><code>[<var>attr</var>^=<var>value</var>]</code></dt>
+ <dd>表示带有以 <var>attr</var> 命名的属性，且属性值是以 <var>value </var>开头的元素。</dd>
+ <dt><code>[<var>attr</var>$=<var>value</var>]</code></dt>
+ <dd>表示带有以 <var>attr</var> 命名的属性，且属性值是以 <var>value </var>结尾的元素。</dd>
+ <dt><code>[<var>attr</var>*=<var>value</var>]</code></dt>
+ <dd>表示带有以 <var>attr</var> 命名的属性，且属性值至少包含一个 <var>value </var>值的元素。</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
+ <dd>在属性选择器的右方括号前添加一个用空格隔开的字母 <code>i</code>（或 <code>I</code>），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。</dd>
+ <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt>
+ <dd>在属性选择器的右方括号前添加一个用空格隔开的字母 <code>s</code>（或 <code>S</code>），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="链接">链接</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">a {
+  color: blue;
+}
+
+/* 以 "#" 开头的页面本地链接 */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* 包含 "example" 的链接 */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* 包含 "insensitive" 的链接,不区分大小写 */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* 包含 "cAsE" 的链接，区分大小写 */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* 以 ".org" 结尾的链接 */
+a[href$=".org"] {
+  color: red;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#internal"&gt;Internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;Example link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#InSensitive"&gt;Insensitive internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.org"&gt;Example org link&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="结果">结果</h4>
+
+<p>{{EmbedLiveSample("Links")}}</p>
+
+<h3 id="多语言">多语言</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">/* 将所有包含 `lang` 属性的 &lt;div&gt; 元素的字重设为 bold */
+div[lang] {
+  font-weight: bold;
+}
+
+/* 将所有语言为美国英语的 &lt;div&gt; 元素的文本颜色设为蓝色 */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* 将所有语言为<span class="op_dict_text2">葡萄牙语</span>的 &lt;div&gt; 元素的文本颜色设为绿色 */
+div[lang="pt"] {
+  color: green;
+}
+
+/* 将所有语言为<span class="op_dict_text2">中文</span>的 &lt;div&gt; 元素的文本颜色设为红色
+   无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* 将所有 `data-lang` 属性的值为 "zh-TW" 的 &lt;div&gt; 元素的文本颜色设为紫色 */
+/* 备注: 和 JS 不同，CSS 可以在不使用双引号的情况下直接使用带连字符的属性名 */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
+&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
+&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
+&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+</pre>
+
+<h4 id="结果_2">结果</h4>
+
+<p>{{EmbedLiveSample("Languages")}}</p>
+
+<h3 id="HTML_有序列表">HTML 有序列表</h3>
+
+<p>由于 {{htmlattrxref("type", "input")}} 属性主要用于 {{HTMLElement("input")}} 元素，因此 HTML 规范要求 {{htmlattrxref("type", "input")}} 属性的匹配不区分大小写，如果使用属性选择器且添加了 <a href="#case-sensitive">大小写敏感</a> 的修饰符，那么将无法与 {{HTMLElement("ol", "有序列表")}} 的 {{htmlattrxref("type", "ol")}} 属性进行匹配。</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">/* 列表类型不需要大小写敏感标志，这是由于 HTML 处理 type 属性的一个怪癖。 */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol type="A"&gt;
+  &lt;li&gt;Example list&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="结果_3">结果</h4>
+
+<p>{{EmbedLiveSample("HTML_ordered_lists")}}</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", "#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.selectors.attribute")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{CSSxRef("attr")}}</li>
+ <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li>
+ <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li>
+ <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li>
+</ul>