伪元素使用详解(超详细版)
1. :after
::after
单双引号的区别
其实无论是单引号还是双引号,他们的本质都是伪元素,只不过因为伪类使用的也是单引号,同时他们的写法类似,写法也相仿,但实际上 css3
为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。
但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。
2.使用伪元素需要注意的问题
在内容模块中提到,伪元素如果没有设置“content”属性,伪元素是无用的。
使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见。
插入的元素在默认情况下是内联元素(或者,在html5中,在文本语义的类别里)。因此,为了给插入的元素赋予高度,填充,边距等等,你通常必须显式地定义它是一个块级元素。
还要注意的是典型的 CSS 继承规则适用于插入的元素。例如,你有字体系列黑体,宋体,无衬线字体应用到 body 元素里,然后伪元素会像其他元素一样继承这些字体系列。
伪元素不会自然继承自父元素(如
padding
margins
)的样式。你的直觉是
:before
和:after
伪元素可能是插入的内容会被注入到目标元素的前或后注入。其实不是这样的,注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何内容的“前”或“后”。来看下面这样一个栗子:
<head><title></title><style type="text/css">p.box { width: 300px; border: solid 1px black; padding: 20px; } p.box:before { content: "#"; border: solid 1px black; padding: 2px; margin: 0 10px 0 0; }</style>
</head>
<body>
<p class="box">Other content.</p>
</body>
效果展示
外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以,不是插入“before”到段落,而是伪元素被置于到此段落的“Other content”的前面。
记住伪元素必须是被应用元素的子元素。
伪元素不会出现在DOM中,这些元素不是真正的元素。因此,它们不是可用的。所以,不要使用伪元素生成内容,是你的网页的可用性和可访问性的关键。
另外一件需要记住的是,开发工具,例如火狐,不要用伪元素显示内容。所以,如果使用了,伪元素会造成难以维护和调试缓慢。
3.使用 after 伪类清除浮动
使用 after
伪类清除浮动也是目前清除浮动的主流方法,其使用方式如下:
未清除浮动之前:
<head><title></title><style type="text/css">.container{border: 1px solid;}.subCon{width: 100px;height: 100px;background-color: yellow;float: left;}</style>
</head>
<body><div class="container"><div class="subCon"></div></div>
</body>
效果展示。可以看出此时因为给子级添加了浮动,所以父级并没有包住子元素。
使用 after
伪类清除浮动:
<head><title></title><style type="text/css">.container{border: 1px solid;}.clear:after{content: "";display: block;clear: both;}.subCon{width: 100px;height: 100px;background-color: yellow;float: left;}</style>
</head>
<body><div class="container clear"><div class="subCon"></div></div>
</body>
效果展示。但是问题又来了,使用 after
伪元素在元素末尾添加内容在 IE6 和 IE7 下是不兼容的。
这个时候就要使用到 zoom
缩放来触发 IE 下的 haslayout
,使元素根据自身内容计算宽高。
要注意:在 IE6,IE7 下,父级元素有宽高是不用清浮动的。
兼容性处理:
<head><title></title><style type="text/css">.container{border: 1px solid;}/*在这里请浮动*/.clear:after{content: "";display: block;clear: both;}/*在这里进行兼容性处理*/.clear{*zoom:1;}.subCon{width: 100px;height: 100px;background-color: yellow;float: left;}</style>
</head>
<body><div class="container clear"><div class="subCon"></div></div>
</body>
效果展示。
注意:是在父级上使用 after
伪类。
4.使用伪元素插入文本内容
<head><title></title><style type="text/css">p.box { width: 300px; border: solid 1px black; padding: 20px; } p.box:before { content: "#"; border: solid 1px black; padding: 2px; margin: 0 10px 0 0; }</style>
</head>
<body>
<p class="box">Other content.</p>
</body>
效果展示
5.使用伪元素插入非文本内容
/* 使用伪元素插入图片 注意:url里面的内容没有引号*/
p:before{content: url(image.jpg);
}
6.给一段文字打引号
效果展示&&源代码
7.参考文献
参考文献一&&参考文献二
伪元素使用详解(超详细版)相关推荐
- Java 泛型详解(超详细的java泛型方法解析)
Java 泛型详解(超详细的java泛型方法解析) 1. 什么是泛型 泛型:是一种把明确类型的工作推迟到创建对象或者调用方法的时候才去明确的特殊的类型.也就是说在泛型使用过程中,操作的数据类型被指定为 ...
- css改变伪元素color_jQuery教程 改变css伪元素样式详解
本篇教程介绍了jQuery教程 改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
- html 伪元素放入标签,CSS中的before和:after伪元素使用详解
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...
- 斜率优化详解(超详细, 有图有代码有注释)
文章目录 斜率优化引入 从例题开始 斜率优化Part 1: 推为斜率式 斜率优化Part 2: 合法点集的斜率单调性 Part 3: 找到最优决策点 Part 4: 斜率优化大流程 Part 5: 斜 ...
- mysql 联表比对,MySQL联表查询详解/超详细mysql left join,right join,inner join用法分析比较...
超详细mysql left join,right join,inner join用法分析 下面是例子分析 表A记录如下: aID aNum 1 a20050111 2 a20050112 3 a200 ...
- log4j 配置详解(超详细)
一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...
- 【bind()函数】JavaScript手写bind()及详解-超详细~~~
这两天学习了手写call.apply.bind,手写bind思考了很久才实现了MDN的示例的结果,所以记录下来~ 因为是第一篇文章,所以可能存在一些错误,希望各位大佬批评指正,不吝赐教. 也欢迎不懂的 ...
- html before边距,CSS中的before和:after伪元素使用详解
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...
- @Autowired注解详解——超详细易懂
@Autowired详解 要搞明白@Autowired注解就是要了解它是什么?有什么作用?怎么用?为什么? 首先了解一下IOC操作Bean管理,bean管理是指(1)spring创建对象 (2)spr ...
最新文章
- 数字图像处理实验(16):PROJECT 06-03,Color Image Enhancement by Histogram Processing
- Java数字反转(编程题)
- java中队列的类是什么意思_java中LinkedList集合类实现栈和队列要注意什么?
- mysql blob取值_MySQL 数据类型:
- JQuery Show()的几种效果
- 微软中国回应关闭实体直营店:中国市场保持正常营运
- 【干货】2021中国“企服企业”规模化获客体系建设指南.pdf(附下载链接)
- long 和 Object的相互转换
- if....else的基本用法
- IIS下发布关于Excel导入导出时遇到的问题集锦
- JavaScript 事件
- Charles抓包工具的安装操作以及可能出现的问题(安装不了证书、手机不能上网)
- 简单算法-割点和割边
- 【005】基于51单片机的多路热释电红外报警器proteus仿真与实物设计
- narwal机器人_中国黑科技扫地机器人云鲸NARWAL将强势回归国内市场
- 举例在移动HTML5 UI框架有那些
- 用Python画小篮子
- 线性代数与解析几何——Part1 解析几何
- 服务器系统通用串行总线控制器,win7系统usb设备不能用通用串行总线控制器无法启动的解决方法...
- 英语基础不好可以学会编程吗?