首先要明白一种思想:结构和样式分离。
结构和样式分离,就意味着:没有样式表,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 : " 0A0 00BB" ; } |
加上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;
}