伪类与伪元素

什么是伪类?

伪类:伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

伪类有::first-child:link:vistited:hover:active:focus:lang

什么是伪元素?

伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象。

伪元素有::first-line:first-letter:before:after

两者可以说都是一种CSS的规则,可以很方便的使用,但是其中却有一点让人很是疑惑,就是其CSS权重

伪类的的权重是10,这点大家都没有什么异议。但是伪元素的权重是1这点可能会有些歧义

e.g.

<p id='t'>this is text for test,Yse just for test</p>
p#t{
	color:blue;
}
p:first-line{
	font-size:300%;
	color:yellow;
}

按权重算,p#t应该是101,p:first-line应该是2

但是在浏览器一看,第一行却是黄色!这是为什么呢?

原来伪元素是创造关于文档语言,这点需要详细的理解一个其含义

其实就是相当于这样

e.g.

<p id='t'><P:first-line>this is text for test,Yse just for test</P:first-line></p>

很是有意思的规则,并且关于CSS的版本不同,表现的形式也将不同。更多详解请看W3C Selector pseudo-elements

此条目发表在 css, 实验室 分类目录,贴了 , 标签。将固定链接加入收藏夹。