Welcome, Old Sport!

学习和认识CSS伪元素

by ilikecss ON 2012/07/12 6860

学习和认识CSS伪元素继承前几篇写的CSS伪元素和伪类的实例,今天我再进一步细说CSS的伪元素。我个人理解伪元素就是在CSS里添加一些额外的标记文档而不破坏文件本身作用即为: 伪元素(Pseudo-Element)。伪元素实际在CSS1中就已经有了,但许多新的类别其实要到CSS2.1才被释放。刚开始伪元素的符号为单冒号(:),后来发展到CSS3.0被归纳为双冒号(::),不过在3.0中单冒号(:)在某些浏览器中还是被继承的。

首先我们来看张图来区分一下伪元素和伪类,有的同学容易混淆。

区分伪元素和伪类

其次我们利用伪元素的:before:after来举例说明用法。

Demo1和Demo2利用了:after:before针对href来添加了文本”()”,可以集合下面代码和Demo比较出其在浏览器中的效果。

.demo1 a:after {
	content: " (" attr(href) ")";
}
.demo2 a:before {
	content: " (" attr(href) ")";
}

CSS元素content: ” “就是你可以添加属性或文本的地方,注意这里“”去除后就只是属性了,差别很大。下面我们再来看一张伪元素浏览器对应表:

伪元素浏览器兼容表

最后我们再来拓展一下伪元素:before:after的用法,以blockquote举例参考Demo3,我们可以在:before:afterCSS里添加更多的属性来美化效果,比如颜色,字体大小,背景色,位置,CSS3的动画效果等等。

.demo3 blockquote:before {  
	content: open-quote; 
	font-size: 30px;
	text-align: center;  
	color: #fff;  
	float: left;  
	position: relative;  
	top: 30px;  
	border-radius: 25px;  
	display: block;  
	height: 25px;  
	width: 25px;  
	background: #AAA;
	transition: all 350ms;  
	-o-transition: all 350ms;  
	-moz-transition: all 350ms;  
	-webkit-transition: all 350ms; 
}  
.demo3 blockquote:after {  
	content: close-quote; 
	font-size: 30px;
	text-align: center;  
	color: #fff;  
	float: right;  
	position: relative;  
	bottom: 50px;  
	right: 120px;
	border-radius: 25px;  
	display: block;  
	height: 25px;  
	width: 25px;  
	background: #AAA;
	transition: all 350ms;  
	-o-transition: all 350ms;  
	-moz-transition: all 350ms;  
	-webkit-transition: all 350ms;  
}  
.demo3 blockquote:hover:after, .demo3 blockquote:hover:before {
	background-color: #555555;
}

同学有点CSS基础的朋友可以根据以上代码融汇贯通使用,CSS贵在多使用反复操作,从实践中体会原理。喜欢的同学可以下载Demo后自行修改学习。

11条评论
  1. #1

    金刚禅狮子吼说道:

    辛苦,基础最重要了~

  2. #2

    肯德基门说道:

    文章中 添加代码的效果是怎么实现的 呢?

  3. 谢谢分享,学习了

  4. #4

    Daizaburo说道:

    Thanks for your thoughts. It’s hleped me a lot.




TOP