blob: 20cd580e971e28bf53e79c056bcac4644dbd8e80 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: 属性选择器
slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
---
<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
<p>从HTML的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS中，你能用属性选择器来选中带有特定属性的元素。本节课中，我们将会为你展示如何使用这些很有用的选择器。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">学习前提：</th>
<td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td>
</tr>
<tr>
<th scope="row">目标：</th>
<td>学习属性选择器是什么，如何使用。</td>
</tr>
</tbody>
</table>
<h2 id="存否和值选择器">存否和值选择器</h2>
<p>这些选择器允许基于一个元素自身是否存在（例如<code>href</code>）或者基于各式不同的按属性值的匹配，来选取元素。</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">选择器</th>
<th scope="col">示例</th>
<th scope="col">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[<em>attr</em>]</code></td>
<td><code>a[title]</code></td>
<td>匹配带有一个名为<em>attr</em>的属性的元素——方括号里的值。</td>
</tr>
<tr>
<td><code>[<em>attr</em>=<em>value</em>]</code></td>
<td><code>a[href="https://example.com"]</code></td>
<td>匹配带有一个名为<em>attr</em>的属性的元素，其值正为<em>value</em>——引号中的字符串。</td>
</tr>
<tr>
<td><code>[<em>attr</em>~=<em>value</em>]</code></td>
<td><code>p[class~="special"]</code></td>
<td>
<p>匹配带有一个名为<em>attr</em>的属性的元素 ，其值正为<em>value</em>，或者匹配带有一个<em>attr</em>属性的元素，其值有一个或者更多，至少有一个和<em>value</em>匹配。</p>
<p>注意，在一列中的好几个值，是用空格隔开的。</p>
</td>
</tr>
<tr>
<td><code>[<em>attr</em>|=<em>value</em>]</code></td>
<td><code>div[lang|="zh"]</code></td>
<td>匹配带有一个名为<em>attr</em>的属性的元素，其值可正为<em>value</em>，或者开始为<em>value</em>，后面紧随着一个连字符。</td>
</tr>
</tbody>
</table>
<p>下面的示例中，你可以看到这些选择器是怎样使用的。</p>
<ul>
<li>使用<code>li[class]</code>，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。</li>
<li><code>li[class="a"]</code>匹配带有一个<code>a</code>类的选择器，不过不会选中一部分值为<code>a</code>而另一部分是另一个用空格隔开的值的类，它选中了第二项。</li>
<li><code>li[class~="a"]</code>会匹配一个<code>a</code>类，不过也可以匹配一列用空格分开、包含<code>a</code>类的值，它选中了第二和第三项。</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
<h2 id="子字符串匹配选择器">子字符串匹配选择器</h2>
<p>这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有<code>box-warning</code>和<code>box-error</code>类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用<code>[class^="box-"]</code>来把它们两个都选中。</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">选择器</th>
<th scope="col">示例</th>
<th scope="col">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[<em>attr</em>^=<em>value</em>]</code></td>
<td><code>li[class^="box-"]</code></td>
<td>匹配带有一个名为<em>attr</em>的属性的元素，其值开头为<em>value</em>子字符串。</td>
</tr>
<tr>
<td><code>[<em>attr</em>$=<em>value</em>]</code></td>
<td><code>li[class$="-box"]</code></td>
<td>匹配带有一个名为<em>attr</em>的属性的元素，其值结尾为<em>value</em>子字符串</td>
</tr>
<tr>
<td><code>[<em>attr</em>*=<em>value</em>]</code></td>
<td><code>li[class*="box"]</code></td>
<td>匹配带有一个名为<em>attr</em>的属性的元素，其值的字符串中的任何地方，至少出现了一次<em>value</em>子字符串。</td>
</tr>
</tbody>
</table>
<p>下个示例展示了这些选择器的用法：</p>
<ul>
<li><code>li[class^="a"]</code>匹配了任何值开头为<code>a</code>的属性，于是匹配了前两项。</li>
<li><code>li[class$="a"]</code>匹配了任何值结尾为<code>a</code>的属性，于是匹配了第一和第三项。</li>
<li><code>li[class*="a"]</code>匹配了任何值的字符串中出现了<code>a</code>的属性，于是匹配了所有项。</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
<h2 id="大小写敏感">大小写敏感</h2>
<p>如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用<code>i</code>值。这个标记告诉浏览器，要以大小写不敏感的方式匹配ASCII字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML中是大小写敏感的。</p>
<p>下面的示例中，第一个选择器将会匹配一个开头为<code>a</code>的值，这样它只匹配了第一项，因为另外两项开头是大写的A。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p><strong>备注：</strong>此外还有一个更加新的<code>s</code>值，它会强制在上下文的匹配正常为大小写不敏感的时候，强行要求匹配时大小写敏感。不过，在浏览器中它不太受支持，而且在上下文为HTML时也没啥用。</p>
</div>
<h2 id="接下来……">接下来……</h2>
<p>现在我们完成了属性选择器的学习，你可以继续读下篇文章——关于<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素选择器</a>的事情。</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
<h2 id="模块目录">模块目录</h2>
<ol>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a>
<ul>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li>
</ul>
</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li>
</ol>
|
