diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/css/_doublecolon_selection | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/web/css/_doublecolon_selection')
-rw-r--r-- | files/ru/web/css/_doublecolon_selection/index.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/files/ru/web/css/_doublecolon_selection/index.html b/files/ru/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..a359df7cd1 --- /dev/null +++ b/files/ru/web/css/_doublecolon_selection/index.html @@ -0,0 +1,109 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - Experimental + - Layoout + - Reference + - Псевдоэлементы +translation_of: 'Web/CSS/::selection' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><span class="seoSummary"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> <strong><code>::selection</code> </strong>позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).</span></p> + +<pre class="brush: css no-line-numbers">::selection { + background: cyan; +}</pre> + +<h2 id="Разрешённые_свойства">Разрешённые свойства</h2> + +<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::selection</code> :</p> + +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("cursor")}}</li> + <li>{{cssxref("caret-color")}}</li> + <li>{{cssxref("outline")}} и его длинные записи</li> + <li>{{cssxref("text-decoration")}} и связанные свойства</li> + <li>{{cssxref("text-emphasis-color")}}</li> + <li>{{cssxref("text-shadow")}}</li> +</ul> + +<div class="warning"> +<p>Заметим, что, в частности, свойство {{cssxref("background-image")}} игнорируется.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">/* синтаксис Firefox */ +::-moz-selection + +{{csssyntax}} +</pre> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Этот текст будет стилизован особым образом при выделении.</div> +<p>Также попробуйте выделить текст в этом параграфе.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Сделаем выделенный текст золотым с красным фоном */ +::-moz-selection { + color: gold; + background: red; +} + +::selection { + color: gold; + background: red; +} + +/* Сделаем выделенный в параграфе текст белым на синем фоне */ +p::-moz-selection { + color: white; + background: blue; +} + +p::selection { + color: white; + background: blue; +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Пример')}}</p> + +<h2 id="Спецификации">Спецификации</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('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Изначальное определение.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Примечание:</strong> Хотя псевдоэлемент <code>::selection</code> присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(основываясь на обсуждении в списке рассылки W3C Style)</a>. Этот псевдоэлемент был возвращён в <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a>.</p> +</div> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div> +<p>{{Compat("css.selectors.selection")}}</p> +</div> |