关于:before :after
首先要明白一种思想:结构和样式分离。
结构和样式分离,就意味着:没有样式表,HTML文档也是一个完整的文档;没有样式表,也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""; ------就算没有------:before 和 :after中的content: "";------HTML文档也不会受到影响,HTML文档也是一个完整的文档,所以,用简单的话来说: :before 和 :after中的content: "";不过是对HTML的装潢,使HTML看起来更漂亮一些。举个例子:
1
|
< a href = "#" >知道更多</ a > |
以上这句语句,是一个链接,点击就能打开,就算没有任何CSS修饰,也不影响打开链接。但是,如果稍微修饰,这个链接就会看起来美观一些:
1
2
3
|
a:after { content : "\00A0\000BB" ; } |
加上CSS修饰后,链接看起来就美观一些。
既然选择器是::before 和 :after ,
那么选定的对象就是某个元素的前和后元素,样式当然也就是给选定元素的样式。
举例来说:
HTML文件中,有个链接:
1
|
< a href = "#" >知道更多</ a > |
对<a />标签使用样式,就是:
1
2
3
4
|
a:before { content : "哈哈哈哈" ; color : red ; } |
那么,用浏览器打开HTML文档,就会看见链接部分变成:
哈哈哈哈知道更多
其中:
哈哈哈哈
的字体是红色的,其它不变。
因为 a:before{} 这个选择器选择的是标签<a href="#">哈哈哈哈知道更多</a>中原来内容“知道更多”之前的我们加进去的部分“哈哈哈哈”。
这就证明:
加进去的内容是属于这个标签内的一部分,CSS样式当然也仅仅对这部分有效;
如果没有内容,那么样式表无效,因为CSS样式必须针对确实存在的内容。
2.1 例如,如果
a:before{
content: ""; /* 没有内容 */
color: red;
}
那么样式表无效,这就相当于:
a:before{
color: red;
}
随机推荐
- tomcat war包自动化部署脚本
#/bin/bash #带发布build的war包名称 war_name="weiFeng.war" war_dir="/home/deploy/wei_feng_tar ...
- strults2标签s:set的用法
struts2标签<s:set></s:set>的用法.原理 http://liuna718-163-com.iteye.com/blog/1124654 我的例子: ...
- Azure Storage 分块上传
概述 Azure 存储提供三种类型的 Blob:块 Blob.页 Blob 和追加 Blob.其中,块 Blob 特别适用于存储短的文本或二进制文件,例如文档和媒体文件. 块 Blob 由块组成,每个 ...
- 有关IM即时通讯原理
在网上搜索了一些资料,谈谈自己对IM即时通讯的理解 IM全称为Instant Messaging,即时通讯,如qq那种的. 现在有两个用户UserA, UserB, 俩人是一个IM通讯软件的好友,Us ...
- [k8s]openshiftv1.5.1安装笔记
centos7安装 net.ifnames=0 biosdevname=0 初始化系统 yum install wget -y wget -O /etc/yum.repos.d/CentOS-Base ...
- Sql常用语法总结
SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...
- Sql语句查询XML - 小结
--两种方式查询 DECLARE @varXML XML, @varXML1 XML --.xml数据源为属性方式 SET @varXML = '<PARAM> <Row FID = ...
- 11.static(转)
本文转自:http://blog.csdn.net/keyeagle/article/details/6708077 google了近三页的关于C语言中static的内容,发现可用的信息很少,要么长篇 ...
- 82. Remove Duplicates from Sorted List II【Medium】
82. Remove Duplicates from Sorted List II[Medium] Given a sorted linked list, delete all nodes that ...
- C 调用 lua 函数
C 调用 lua 函数 需要考虑的问题: 1. 使用 lua_pcall 可以调用 lua 函数,首先把 lua 函数入栈,然后把参数入栈, lua_pcall(luaState, 参数个数, 返回值 ...