CSS3---4.伪元素选择器
a)重点:E::before、E::after
i.是一个行内元素,需要转换成块:display:block float:** position:
ii.必须添加content,哪怕不设置内容,也需要content:””
iii.E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理
iv.E::before: 定义在一个元素的内容之前插入content属性定义的内容与样式
v.E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式
vi.注意:
1.IE6、IE7与IE8(怪异模式Quirks mode)不支持此伪元素
2.CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念,CSS3中 提出伪元素的概念 E::before和E::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者 E:after伪类
b)E::first-letter文本的第一个字母或字(不是词组)
c)E::first-line 文本第一行
d)E::selection 可改变选中文本的样式
<style>*{padding: 0;margin: 0;}body{padding: 200px;}div{height: 200px;float: left;}div:nth-of-type(1){width: 300px;background-color: yellowgreen;}div:nth-of-type(2){width: 150px;background-color: skyblue;position: relative;}div:nth-of-type(2)::before,div:nth-of-type(2)::after{position: absolute;content: "";width: 40px;height: 40px;border-radius: 50%;background-color: #fff;}div:nth-of-type(2)::before{left: -20px;top:-20px;}div:nth-of-type(2)::after{left: -20px;bottom:-20px;}
</style>
<body><div></div><div></div>
</body>
浏览器渲染如下:
转载于:https://www.cnblogs.com/Tobenew/p/10524953.html
CSS3---4.伪元素选择器相关推荐
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- CSS基础(part21)--CSS3伪元素选择器
学习笔记,仅供参考,有错必究 参考自:pink老师教案 CSS3伪元素选择器 伪类选择器: 选择符 简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 伪类选择 ...
- CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素
CSS3知识点: CSS3的相关属性不兼容低版本浏览器,IE9以下是不兼容的,在实际开发中要特别注意,移动端支持优于PC端,是在CSS2上新增的属性,关于兼容这里有两个名词需要了解: 渐进增强 :(针 ...
- 伪元素选择器使用场景-字体图标(CSS3)
伪元素选择器使用场景-字体图标(CSS3) <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3)
伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3) <!DOCTYPE html> <html lang="en"><head>< ...
- 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
- html5新增的伪类选择器有,CSS3新增了哪些选择器?(属性、结构伪类、伪元素选择器)...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
- CSS3新增属性——新增选择器(属性选择器、结构伪类选择器、伪元素选择器)
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
- 015_CSS伪元素选择器
1. 伪元素选择器是通过双冒号(::)加上特定的具有某种含义的单词来确定所选元素. 2. 伪元素/伪对象: 不存在在DOM文档中, 是虚拟的元素, 是创建的新元素.这个新元素(伪元素)是某个元素的子元 ...
最新文章
- SyntaxError: Non-ASCII character ‘\xe5‘ in file(xxlrt_1.py) on line 7, but no encoding declared;
- mysql中engine=innodb和engine=myisam的区别 (转)
- 分析B站10万条弹幕后,发现了歪嘴战神的终极奥义!
- Redis事务,ACID性质,但是Redis不支持事务回滚
- ubuntu 安装 php
- C语言应用笔记:C语言typedef关键字及其使用
- 如何在github用git Pages上传自己在本地做的项目?
- 人脸识别Demo解析C#
- 服务器客户端证书,使用服务器和客户端证书以及私钥创建SSLContext
- CSDN博客图片服务器异常的艰辛排查与处理-上传文件时发生 HTTP 错误(错误代码:502)的解决办法
- Flex弹性布局详细介绍
- Android有效解决加载大图片内存溢出问题及优化虚拟机内存
- 计算机专业保研英语自我介绍,计算机专业保研面试英文自我介绍
- 对预言(Oracle)的一次探讨
- 一流的匠人,必有一流的心性:工作是人生最尊贵、最重要、最有价值的行为
- Android手机扫描识别银行卡技术
- scratch下实现子弹追踪特效
- php中date是啥意思,php中date函数具有哪些功能呢?
- Polr-kyuan的PHP短网址程序源码
- 电脑部分工具地址地址