做网站 被谷歌收录,大学 两学一做专题网站,公司企业查询信息平台,文学网站建设平台1.什么是伪元素
伪元素不是真正的页面元素#xff0c;html没有对应的元素#xff0c;但是其所有用法和表现行为与真正的页面元素一样#xff0c;可以对其使用如页面元素一样的CSS样式#xff0c;表面上看上去貌似是页面的某些元素来展现#xff0c;实际上CSS样式展现的行…1.什么是伪元素
伪元素不是真正的页面元素html没有对应的元素但是其所有用法和表现行为与真正的页面元素一样可以对其使用如页面元素一样的CSS样式表面上看上去貌似是页面的某些元素来展现实际上CSS样式展现的行为因此被称为伪元素。
注意1.伪元素:before和:after添加的内容默认是行内元素加宽高无效需要调整为行内块或者块级元素两个伪元素的content属性表示伪元素的内容设置before和after时必须设置其content属性否则伪元素不起作用。
2.伪元素不占位置
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle typetext/cssdiv::before {content: 我是BEFORE;background-color: green;width: 100px; /*行内元素不生效的*/height: 100px; /*类选择、伪类选择器 就是选区对象伪元素选择器本质上是插入一具元素标签 盒子只不过是行内元素*/}div::after {content: 我是AFTER;background-color: red;display: block; /*转成块元素*/width: 100px;height: 100px;/*类选择、伪类选择器 就是选区对象伪元素选择器本质上是插入一具元素标签 盒子只不过是行内元素*/} /style
/head
bodydiv我是BODY/div
/body
/html
效果
2.伪元素的应用
1.装饰标题
2.清除浮动
3.下拉框的小角标
