communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > selection伪元素小解_html/css_WEB-ITnose

selection伪元素小解_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:41:43
original
1441 Les gens l'ont consulté

上一篇：《RGBA与Opacity区别小解》

今天说一个简单的伪元素::selection，它的用武之地仅在于改变选中文本时文本的颜色和文本背景颜色。

网页默认选择文本后，文字颜色为白色，文字背景颜色为蓝色，要改变这种选择样式，可以使用::selection伪元素来分别设置文本颜色和文本背景颜色。

在线查看高清无码效果可以猛戳这里这里或直接点击下面的网址：

http://codepen.io/myvin/pen/bdLXvK

给出例子，先来个段落：

HTML Markup:

<p>十八新娘八十郎，苍苍白发对红妆。 鸳鸯被里成双夜，一树梨花压海棠。</p>
Copier après la connexion

样式修饰:

p::selection{	background-color: red;	color:blue;}
Copier après la connexion

效果如下：

这里有两点需要注意：

  • selection伪元素只能设置background-color和color两个属性，不能设置除此之外的其他任何属性

  • 在CSS3中selection伪元素使用双冒号::，不能使用单冒号:，写单冒号不会起到selection的作用，因为在CSS3规范中规定：

  • 伪类写法使用单冒号:，如:last-child
  • 伪元素写法使用双冒号::，如::first-line和裆下的::selection

  • 在CSS2中伪类和伪元素都使用单冒号:，但是在FF37.0.2版本和Chrome 43.0.2357.130版本中，单冒号:selection不起作用，before和after起作用

    • 上一篇：《RGBA与Opacity区别小解》

    Étiquettes associées：
    selection伪元素小解
    source：php.cn
    Article précédent：动态绑定HTML_html/css_WEB-ITnose Article suivant：轻量级的HTML/CSS/JS框架：MUI_html/css_WEB-ITnose
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Le processus permettant de déterminer si un élément existe dans un tableau n'est pas valide Désolé de vous déranger, mais j'ai passé deux heures à essayer de comprendre cela. Le prob...
    Depuis 2024-04-03 13:03:54
    0
    1
    377
    Largeur de la fenêtre CSS React.js Je développe un site Web réactif en utilisant React. Pour le style, j'utilise des feuilles...
    Depuis 2024-03-31 16:31:23
    0
    1
    386
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal