伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行

1、::selection CSS3伪类自定义文本选中时的样式

有的人在浏览网页时，喜欢一边选中文本一边阅读。在windows环境下，正常的文本选中应该是深蓝色背景白色文本的样式。那么想要修改文本选中样式，可以通过css中有这样的一个伪类::selection用于自定义文本选中时的样式设置。

::selection 选择器匹配被用户选取的文本内容。只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

  <style>div::selection {background-color: red;color: #fff;}</style></head><body><div>blablabla,wakakakakakak.....</div></body>

选中文字的效果如下

兼容性：

2、web打断单词，在任意位置换行：

使用CSS3的 word-break:break-all; 属性

效果：

浏览器兼容性：

3、CSS样式使字体倾斜:

使用字体样式 font-style:italic；各浏览器都支持

4、只显示边框一侧：

div {border:0;border-left:1px solid red;
}

伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行相关推荐

取消文本框被选中时边框的默认样式
取消文本框被选中时边框的默认样式文本框被选中时其边框会变为默认的样式,使用这个属性可以取消其默认样式,文本框被选中时边框无变化 outline: none; 举例 <style>#bia ...
扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
GridView既强大又好用.为了让它更强大.更好用,我们来写一个继承自GridView的控件. [索引页] [×××] 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式作者:w ...
使用伪类来实现类似微信群聊的头像样式
最近看了一篇张鑫旭的博客,觉得人家的想法特别奇特,很值得学习.遂借鉴学习并记录一下,以备不时之需. 原文地址:伪类匹配列表数目实现微信群头像CSS布局的技巧简介我们在使用微信群聊的时候,群聊的头像 ...
一个使用：focus-within伪类实现的button选中动画效果
源代码: <html> <style>.g-container {width: 300px;margin: 50px auto; }.g-container p {line-h ...
CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
转自爱设计原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为 ...
checkbox选中时如何改变默认样式
刚刚发布了人生中的第一篇博客,有点小兴奋,紧接着再来了一篇,希望不要出现太多问题. 好了,我的废话太多了,说点有料的东西 1.是关于checkbox的,checkbox在选中.未选中的时候是有默认样式 ...
ul,ol中的li文本居中时，默认序列号样式圆点在最左侧,使圆点跟随li的方法
加上下面代码即可解决. ol li,ul li{ list-style-position:inside; }
EditText光标和文本选中样式自定义
一.先上EditText的布局关键代码: <EditTextandroid:textCursorDrawable="@drawable/shape_cursor_0080ff" ...
HTML中设置鼠标悬停状态伪类,四大伪类,css鼠标样式设置,reset操作,静止对文本操作...
本文将要为您介绍的是四大伪类,css鼠标样式设置,reset操作,静止对文本操作,教程操作方法:07.31自我总结一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) ...

伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行

1、::selection CSS3伪类自定义文本选中时的样式

2、web打断单词，在任意位置换行：

3、CSS样式使字体倾斜:

伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行相关推荐

最新文章

热门文章