首先要明白一种思想:结构和样式分离。

结构和样式分离,就意味着:没有样式表,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"哈哈哈哈";
  colorred;
}

那么,用浏览器打开HTML文档,就会看见链接部分变成:

哈哈哈哈知道更多

其中:

哈哈哈哈

的字体是红色的,其它不变。

因为 a:before{} 这个选择器选择的是标签<a href="#">哈哈哈哈知道更多</a>中原来内容“知道更多”之前的我们加进去的部分“哈哈哈哈”。

这就证明:

  1. 加进去的内容是属于这个标签内的一部分,CSS样式当然也仅仅对这部分有效;

  2. 如果没有内容,那么样式表无效,因为CSS样式必须针对确实存在的内容。

    2.1 例如,如果

    a:before{

    content: "";   /*   没有内容  */

    color: red;

    }

    那么样式表无效,这就相当于:

    a:before{

    color: red;

    }

随机推荐

  1. tomcat war包自动化部署脚本

    #/bin/bash #带发布build的war包名称 war_name="weiFeng.war" war_dir="/home/deploy/wei_feng_tar ...

  2. strults2标签s:set的用法

    struts2标签<s:set></s:set>的用法.原理 http://liuna718-163-com.iteye.com/blog/1124654     我的例子: ...

  3. Azure Storage 分块上传

    概述 Azure 存储提供三种类型的 Blob:块 Blob.页 Blob 和追加 Blob.其中,块 Blob 特别适用于存储短的文本或二进制文件,例如文档和媒体文件. 块 Blob 由块组成,每个 ...

  4. 有关IM即时通讯原理

    在网上搜索了一些资料,谈谈自己对IM即时通讯的理解 IM全称为Instant Messaging,即时通讯,如qq那种的. 现在有两个用户UserA, UserB, 俩人是一个IM通讯软件的好友,Us ...

  5. [k8s]openshiftv1.5.1安装笔记

    centos7安装 net.ifnames=0 biosdevname=0 初始化系统 yum install wget -y wget -O /etc/yum.repos.d/CentOS-Base ...

  6. Sql常用语法总结

    SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...

  7. Sql语句查询XML - 小结

    --两种方式查询 DECLARE @varXML XML, @varXML1 XML --.xml数据源为属性方式 SET @varXML = '<PARAM> <Row FID = ...

  8. 11.static(转)

    本文转自:http://blog.csdn.net/keyeagle/article/details/6708077 google了近三页的关于C语言中static的内容,发现可用的信息很少,要么长篇 ...

  9. 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 ...

  10. C 调用 lua 函数

    C 调用 lua 函数 需要考虑的问题: 1. 使用 lua_pcall 可以调用 lua 函数,首先把 lua 函数入栈,然后把参数入栈, lua_pcall(luaState, 参数个数, 返回值 ...