blob: 173ee61e1cb3bf52bc042f8624628dba17059491 (
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: Web/CSS/Attribute_selectors
translation_of: Web/CSS/Attribute_selectors
---
<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
<h2 id="Summary" name="Summary">Обзор</h2>
<p>Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.</p>
<dl>
<dt><code>[<em>attr</em>]</code></dt>
<dd>Обозначает элемент с атрибутом по имени attr.</dd>
<dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
<dd>Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.</dd>
<dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
<dd>Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value</dd>
<dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
<dd>Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.</dd>
<dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
<dd>Обозначает элемент с именем атрибута attr значение которого начинается с "value"</dd>
<dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
<dd>Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"</dd>
<dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
<dd>Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.</dd>
</dl>
<h2 id="Example" name="Example">Пример</h2>
<pre class="brush: css">/* Все span с атрибутом "lang" будут жирными */
span[lang] {font-weight:bold;}
/* Все span в Португалии будут зелёными */
span[lang="pt"] {color:green;}
/* Все span с американским английским будут синими */
span[lang~="en-us"] {color: blue;}
/* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */
span[lang|="zh"] {color: red;}
/* Все внутренние ссылки будут иметь золотой фон */
a[href^="#"] {background-color:gold}
/* Все ссылки с url заканчивающимся на .cn будут красными */
a[href$=".cn"] {color: red;}
/* Все ссылки содержащие "example" в url будут иметь серый фон */
a[href*="example"] {background-color: #CCCCCC;}
</pre>
<pre class="brush: html"><div class="hello-example">
<a href="http://example.com">English:</a>
<span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
<a href="#portuguese">Portuguese:</a>
<span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
<a href="http://example.cn">Chinese (Simplified):</a>
<span lang="zh-CN">世界您好！</span>
</div>
<div class="hello-example">
<a href="http://example.cn">Chinese (Traditional):</a>
<span lang="zh-TW">世界您好！</span>
</div>
</pre>
<p>{{ EmbedLiveSample('Example', 250, 100) }}</p>
<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('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="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Функциональность</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>7</td>
<td>9</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Функциональность</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="http://dev.l-c-n.com/CSS3-selectors/browser-support.php" rel="noreferrer">CSS селекторы: базовая поддержка браузерами</a></li>
<li><a href="http://kimblim.dk/css-tests/selectors/" rel="noreferrer">Совместимость с браузерами селекторов и псевдо-селекторов CSS</a></li>
</ul>
|
