From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/attribute_selectors/index.html | 154 ++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/ru/web/css/attribute_selectors/index.html (limited to 'files/ru/web/css/attribute_selectors/index.html') diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..290db85234 --- /dev/null +++ b/files/ru/web/css/attribute_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: Селекторы атрибутов +slug: Web/CSS/Attribute_selectors +translation_of: Web/CSS/Attribute_selectors +--- +

{{CSSRef("Selectors")}}

+ +

Обзор

+ +

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

+ +
+
[attr]
+
Обозначает элемент с атрибутом по имени attr.
+
[attr=value]
+
Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.
+
[attr~=value]
+
Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
+
[attr|=value]
+
Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.
+
[attr^=value]
+
Обозначает элемент с именем атрибута attr значение которого начинается с "value"
+
[attr$=value]
+
Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"
+
[attr*=value]
+
Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.
+
+ +

Пример

+ +
/* Все 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;}
+
+ +
<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>
+
+ +

{{ EmbedLiveSample('Example', 250, 100) }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors') }}{{ Spec2('CSS3 Selectors') }} 
{{ SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors') }}{{ Spec2('CSS2.1') }}Начальное определение
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ФункциональностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1") }}793
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ФункциональностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

См. также

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