`

CSS3新添加的::selection伪元素

    博客分类:
  • CSS3
 
阅读更多
::selection伪元素

   用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的。

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
2、Firefox 支持替代的 ::-moz-selection选择器。

::selection{
  background: orange;
  color: white;
}
::-moz-selection{
  background: orange;
  color: white;
}

<p>有的设计要求不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。</p>

  • 大小: 78 KB
分享到:
评论

相关推荐

    使用CSS3的::selection改变选中文本颜色的方法

    在应用CSS3::selection伪元素时,开发者还需要考虑到未来浏览器更新可能带来的兼容性问题。随着浏览器不断进化,新的版本可能会引入新的特性或者对现有特性的支持进行调整。因此,建议在使用::selection伪元素的同时...

    Web-前端html+css从入门到精通 165. 伪元素概念与意义.zip

    3. 伪元素的其他应用: 除了`::before`和`::after`,还有一些不太常见的伪元素,如`::first-letter`(选中元素的第一个字母)、`::first-line`(选中元素的第一行)以及`::selection`(选中文本的样式)。这些伪...

    CSS3 伪元素选择器,例如(E::before、E::after)

    常见伪元素: E::first-letter, 表示给元素中的第一个字母设置一个样式 E::first-line, 表示给元素的第一行设置一个样式 E::before, 用于CSS渲染中向元素逻辑上的头部添加内容,主要是用它开显示修饰的内容,...

    CSS设置选中网页文字时的背景和颜色

    此外,::selection伪类可以选择性地应用于网页中的任何元素,这意味着它不仅限于对整个页面的文字选中效果进行修改,还可以针对特定元素进行定制。例如,我们可能只想改变某个特定区块内的文字选中样式,那么只需要...

    HTML5选择器和伪元素----学习分享

    HTML5是现代网页开发的核心,它引入了许多新特性,其中包括增强的选择器和伪元素功能。这些新工具使得开发者能够更加精确地控制文档的样式和结构,提高了代码的可读性和维护性。本文将深入探讨HTML5选择器和伪元素的...

    css改变选中字体背景色和字体色

    如果我们要改变普通文本(非链接)的选中状态样式,可以使用CSS的`::selection`伪元素。这个伪元素可以让我们自定义用户选中文本时的样式: ```css ::selection { color: #ffffff; /* 设置选中文本的字体颜色为...

    第37章 伪类选择器以及伪元素

    在CSS中,伪类选择器和伪元素是两个非常重要的概念,它们允许我们对某些特定状态或位置的元素应用特殊样式,而无需在HTML中添加额外的标记。本章将深入探讨这两个概念。 ### 1. 伪类选择器 伪类选择器是用来定义...

    详解CSS 伪元素及Content 属性

    伪元素的前缀使用在CSS3之前是单冒号(:),而在CSS3中推荐使用双冒号(::),以区分伪元素与伪类。伪类是另一种选择器,用来定义元素的特殊状态(如:hover、:active、:focus等)。 在使用伪元素时,必须设置...

    CSS3移动鼠标选中文本过滤特效.rar

    此外,CSS3还引入了`::selection`伪元素,它允许我们自定义被选中或高亮的文本样式。通过这个伪元素,我们可以设置选中文本的背景色、颜色等属性,以创建独特的选中效果。例如: ```css ::selection { background:...

    css3思维导图(xmind版)

    1. **伪类与伪元素**:CSS3引入了更多的伪类,如`:hover`、`:active`、`:focus`、`:target`等,用于更好地控制元素在不同状态下的样式。伪元素如`::before`和`::after`则可以在元素前后插入内容。 2. **多列布局**...

    浅谈CSS伪类与伪元素

    CSS3中为区分伪类和伪元素,采用了两个冒号(::)来定义伪元素,而单冒号(:)用于伪类。不过,在实际应用中,单冒号和双冒号的写法都是被接受的,并且它们的作用相同,仅仅是书写格式的区别。例如,:before与::...

    位类和伪元素和选择器

    伪类选择器与伪元素不同,它们不创建新的元素,而是用于在特定状态或位置下改变元素的样式。例如,`:active`用于元素被激活时(如链接被点击时),`:focus`针对元素获取焦点时,`:nth-child(n)`则可以选中父元素的第...

    浅谈css之属性及剩余的选择符

    除了上述基于属性的选择符外,CSS还包含一组伪元素和伪类选择符。伪元素(如:before和:after)和伪类(如:first-letter和:first-line)允许我们对文档中的某些特殊位置或元素状态应用样式。比如,:first-letter伪类...

    利用CSS3的特性改变文本选中时的颜色

    总的来说,CSS3的`::selection`伪元素提供了一种强大的工具,让我们能够定制化网页的每一个细节,提升用户体验。但设计师在应用这些技巧时,应当始终以提升用户体验为目标,保持良好的可用性和可访问性。

    css学习文档

    - 使用`::before`和`::after`伪元素可以在元素内容前后插入新内容。 - `content`属性用于指定插入的内容。 #### 四、多列布局 - **多列布局**:通过`column-count`属性可以轻松实现多列布局。 - `column-count`...

    JS控制伪元素的方法汇总

    CSS中的伪元素包括`::after`, `::before`, `::first-line`, `::first-letter`, `::selection`, 和 `::backdrop`。其中,`::after`和`::before`是最常用的,常用于添加额外的视觉内容。CSS3推荐使用双冒号`::`来区分...

    前端webcss3笔记.docx

    本笔记主要讲解了 CSS3 的选择器、属性选择器、伪类选择器、伪元素选择器、阴影、字体、渐变等方面的知识点。 一、选择器 1. 兄弟选择器 - 相邻兄弟选择器:E + F,选择紧邻在 E 后面的 F 元素 - 通用兄弟选择器:...

    CSS3经典使用手册

    - **伪元素选择器**: - `::first-line`:选择某个元素中的第一行文字,并为其应用样式。 - `::first-letter`:选择某个元素中的首字母,并为其应用样式。 - `::before` 和 `::after`:在元素之前或之后插入内容...

    前端开源库-pseudo-elements

    7. `::marker`:CSS3引入的新伪元素,可以自定义列表项符号。 8. `::scrollbar` 和相关伪元素(如 `::scrollbar-thumb`,`::scrollbar-track` 等):允许自定义滚动条的样式。 标签“前端开源”暗示这个库是开放源...

    css selected

    通过CSS选择器和伪类,我们可以轻松地为网页中的元素添加丰富的视觉效果和交互功能。特别是针对Firefox浏览器的特性,如`::-moz-selection`,可以帮助开发者创建更加个性化和友好的用户体验。同时,也要注意保持代码...

Global site tag (gtag.js) - Google Analytics