diff options
Diffstat (limited to 'files/ru/web/css/selector_list')
| -rw-r--r-- | files/ru/web/css/selector_list/index.html | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html new file mode 100644 index 0000000000..3bf50932d0 --- /dev/null +++ b/files/ru/web/css/selector_list/index.html @@ -0,0 +1,99 @@ +--- +title: Список селекторов +slug: Web/CSS/Selector_list +tags: + - Верстка + - список селекторов +translation_of: Web/CSS/Selector_list +--- +<div>{{CSSRef}}</div> + +<p>CSS <strong>список селекторов</strong> (<code>,</code>) выбирает все соответствующие ноды.</p> + +<pre class="brush: css no-line-numbers">/* Выбирает все соответствующие элементы */ +span, +div { + border: red 2px solid; +}</pre> + +<p>Для уменьшения размеры таблицы стилей, можно использовать разделяемый запятой список селекторов.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">element, element, element { <em>свойства стиля</em> }</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Группирование_на_одной_линии">Группирование на одной линии</h3> + +<p>Группирование селекторов списком, разделенным запятой, на одной строк.</p> + +<pre class="brush: css">h1, h2, h3, h4, h5, h6 { font-family: helvetica; } +</pre> + +<h3 id="Мультистрочное_группирование">Мультистрочное группирование</h3> + +<p>Группирование селекторов списком, разделенным запятой, на нескольких строках.</p> + +<pre class="brush: css">#main, +.content, +article { + font-size: 1.1em; +} +</pre> + +<h3 id="Невалидные_списки_селекторов">Невалидные списки селекторов</h3> + +<p>Недостатком использования списков селекторов является то, что они не являются эквивалентными:</p> + +<pre class="brush: css">h1 { font-family: sans-serif } +h2:maybe-unsupported { font-family: sans-serif } +h3 { font-family: sans-serif }</pre> + +<pre class="brush: css">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre> + +<p>Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.</p> + +<p>Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счет этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.</p> + +<pre class="brush: css">h1 { font-family: sans-serif } +h2:maybe-unsupported { font-family: sans-serif } +h3 { font-family: sans-serif }</pre> + +<pre class="brush: css">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Переименованно в "selector list"</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("css.selectors.list")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} pseudo-classes, which don't have the legacy mistake that is selector list invalidation.</li> +</ul> |
