css3中的伪元素_html/css_WEB-ITnose
程序员文章站
2022-05-16 12:08:37
...
CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after;
那么在CSS3中,他对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了::first-letter,::first-line,::before,::after另外他还增加了一个::selection。
在css3中,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。
::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式,我们就可以使用这个
p::first-line {font-weight:bold;}
::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动,
.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}
对于 IE8 及更早版本中的 :before,必须声明 。
:before 选择器在被选元素的内容前面插入内容。例如:
div:before{ content:"hello world"}welcome
那么,被选元素是div,div的内容是h1,插入的内容就是content属性值“hello world”
::selection用来改变浏览网页选中文的默认效果
上一篇: 收集前端面试题之url、href、src
推荐阅读
-
HTML5中的Article和Section元素认识及使用
-
详解HTML5中的picture元素响应式处理图片
-
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
-
利用CSS3伪元素实现逐渐发光的方格边框
-
HTML5中的音频和视频媒体播放元素小结
-
html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
-
HTML5中的伪类选择器实现一张图片翻转特效(代码实例)
-
HTML5中新增加的结构元素、网页元素和全局属性
-
使用HTML5的JS选择器操作页面中的元素
-
前端笔记知识点整合之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡