伪元素::selection(怎么修改网页中被选中文本的样式)

时间:2021-11-27 03:32:07

当我们用鼠标选中一段文字的时候我们会发现文字的颜色和背景色都改变了,

有时候设计给这种选中状态设计了其他的样式,那么我们怎么来自定义选中的文本的样式呢?

用::selection

<p>我是一段文字,当我被选中时我是默认样式</p>
<p>我是一段文字,当我被选中时我是自定义的样式</p>
p:nth-of-type(2)::selection{
background-color: #FFAAAA;
color: #5F9EA0;
}

这是效果:

伪元素::selection(怎么修改网页中被选中文本的样式)

伪元素::selection(怎么修改网页中被选中文本的样式)的更多相关文章

  1. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  2. js实现自定义修改网页中表格信息

    项目中的打印页面,为提高用户体验,需要增自定修改表格内容的功能,以下是使用示意图(双击td标签部分的内容,可自定义修改): 以下是js插件源码,存为edit.js文件: var tbl, tbt; v ...

  3. 修改 input中的placeholder的字体样式和颜色

    placeholder属性是css3中新增加的属性, 由于是新加入的属性因此对各大浏览器都不兼容: 因此在使用的时候要加兼容性 火狐:-moz-placeholder { /* Mozilla Fir ...

  4. selection伪元素小解

    上一篇:<RGBA与Opacity区别小解> p{font-size:14px;} 今天说一个简单的伪元素::selection,它的用武之地仅在于改变选中文本时文本的颜色和文本背景颜色. ...

  5. 使用原生js来控制、修改CSS伪元素的方法总汇&comma; 例如&colon;before和&colon;after

    在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真 ...

  6. CSS中的伪元素选择器

    定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...

  7. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  8. CSS3 01&period; CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  9. 如何使用JS操纵伪元素

    css引入伪类和伪元素概念是为了格式化文档树以外的信息.也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素. 伪类 用于当已有元素处于的某个状态时 ...

随机推荐

  1. FFmpeg相关资料

    编译: http://www.jianshu.com/p/147c03553e63 http://www.cocoachina.com/ios/20150514/11827.html http://c ...

  2. eclipse安装Hadoop1&period;1&period;2版本开发插件

    Hadoop1.1.2版本没有直接适合Eclipse的安装插件,需要手动打包jar文件. 我的系统配置: VMware Workstation10 CentOS-6.5-i386 hadoop-1.1 ...

  3. bzoj2729

    一看就知道是数学题,考虑插空法由于老师只有两人,所以先对老师进行插空这里考虑两种情况:1.两个老师站在同一处,即两个男生之间站了两个老师这时候需要一个女生站在两个老师之间,再对女生插空,根据乘法原理即 ...

  4. Linux内核-系统调用

    Linux内核-系统调用 1.与内核通信 #系统调用在用户空间进程和硬件设备之间添加了一个中间层 作用:1.为用户空间提供了一种硬件的抽象接口 2.系统调用保证了系统的稳定和安全 3.出于每一个进程都 ...

  5. &lbrack;Nhibernate&rsqb;二级缓存

    [Nhibernate]二级缓存 目录 写在前面 文档与系列文章 二级缓存 Nhibernate二级缓存提供程序 一个例子 总结 写在前面 上篇文章介绍了nhibernate中一级缓存的相关内容,一级 ...

  6. 校验 MD5 值

    Linux 环境下:打开终端,输入命令:"md5sum filename",将结果与网页提供值对比.Windows 环境下:下载 MD5 校验软件并使用.

  7. Area POJ - 1265 -皮克定理-叉积

    Area POJ - 1265 皮克定理是指一个计算点阵中顶点在格点上的多边形面积公式,该公式可以表示为2S=2a+b-2, 其中a表示多边形内部的点数,b表示多边形边界上的点数,S表示多边形的面积. ...

  8. 通过wlst工具创建weblogic11g域单节点包括服务与被管服务

    1:创建域(1)节点一执行 export MV_HOME=/home/wzh/Oracle/Middleware export WL_HOME=$MV_HOME/wlserver_10. export ...

  9. C&num;中使用Log4记录日志

    具体步骤如下: 从网上下载log4net对应.net版本的dll 在C#项目中引用该dll 创建log4net对应的配置文件 在程序中使用 log4net的配置文件如下: <?xml versi ...

  10. Android笔记-2-TextView的属性详解

    [Android 基础]TextView的属性详解 android:autoLink :设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web / ...