From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/attribute_selectors/index.html | 230 +++++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 files/zh-cn/web/css/attribute_selectors/index.html (limited to 'files/zh-cn/web/css/attribute_selectors/index.html') 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 +--- +
{{CSSRef}}
+ +

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

+ +
/* 存在title属性的<a> 元素 */
+a[title] {
+  color: purple;
+}
+
+/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* 存在href属性并且属性值包含"example"的<a> 元素 */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

语法

+ +
+
[attr]
+
表示带有以 attr 命名的属性的元素。
+
[attr=value]
+
表示带有以 attr 命名的属性，且属性值为 value 的元素。
+
[attr~=value]
+
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
+
[attr|=value]
+
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
+
[attr^=value]
+
表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
+
[attr$=value]
+
表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
+
[attr*=value]
+
表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
+
[attr operator value i]
+
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
+
[attr operator value s] {{Experimental_Inline}}
+
在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。
+
+ +

示例

+ +

链接

+ +

CSS

+ +
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;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

结果

+ +

{{EmbedLiveSample("Links")}}

+ +

多语言

+ +

CSS

+ +
/* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
+div[lang] {
+  font-weight: bold;
+}
+
+/* 将所有语言为美国英语的 <div> 元素的文本颜色设为蓝色 */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
+div[lang="pt"] {
+  color: green;
+}
+
+/* 将所有语言为中文的 <div> 元素的文本颜色设为红色
+   无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* 将所有 `data-lang` 属性的值为 "zh-TW" 的 <div> 元素的文本颜色设为紫色 */
+/* 备注: 和 JS 不同，CSS 可以在不使用双引号的情况下直接使用带连字符的属性名 */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+
+ +

结果

+ +

{{EmbedLiveSample("Languages")}}

+ +

HTML 有序列表

+ +

由于 {{htmlattrxref("type", "input")}} 属性主要用于 {{HTMLElement("input")}} 元素，因此 HTML 规范要求 {{htmlattrxref("type", "input")}} 属性的匹配不区分大小写，如果使用属性选择器且添加了 大小写敏感 的修饰符，那么将无法与 {{HTMLElement("ol", "有序列表")}} 的 {{htmlattrxref("type", "ol")}} 属性进行匹配。

+ +

CSS

+ +
/* 列表类型不需要大小写敏感标志，这是由于 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;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

结果

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf