打印

[讨论] 类和伪类

前几天一个朋友问我,伪类的伪是什么意思,为什么叫伪类,我突然发现自己也感觉到很模糊,搜索一下,发现相关信息也比较少,就找了一下w3c的关于selector的文献,夹杂个人理解的总结了一下,现在拿出来和大家一起探讨。

下文首发于http://www.dancewithnet.com/article.asp?ID=333

   在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(selector)。 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素。
    在CSS2.1中的选择符语法见下图,由语法形成了各种选择符。


:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属性,所以此类选择符叫类选择符。

    在CSS2.1中样式通常依附与一个元素在文档树中的位置,这个简单的模型对于许多情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构。例如,在HTML中,没有元素能够引用一个段落的第一行,所以也没有简单的CSS选择符应用它。
    所以,CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树以外信息的格式化。
伪类:伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。
    伪类有::first-child ,:link:,vistited,:hover:,active:focus,:lang
伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们,否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例如::before和:after能够访问产生的内容)。
     伪元素有::first-line,:first-letter,:before,:after  (在苏沈小雨编的CSS2.0中文手册中把:first-line,:first-letter列为伪类应该是理解上的错误)
     伪类和伪元素都不出现在源文件和文档树中。
     
总结上面可以知道:
      1、类选择器可以看着属性选择符E[class~=className]在HTML应用中的一种快捷方式,从逻辑和功能上理解有传统类的含义,其被HTML元素预定义的属性class引用,所以叫着类选择器。
      2、伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
      3、伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。

Refer:http://www.w3.org/TR/CSS21/selector.html

[ 本帖最后由 YanKaven 于 2006-11-6 10:22 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
本帖最近评分记录
  • snwebsite 威望 +2 原创内容 2006-11-1 10:06
郁闷得我。。。lz写的我有点糊涂了,自己一直以来都没有考虑做过这些问题,真考虑的时候,又发现自己其实一直都是在糊涂中学习着css的
深究是好的思维,先顶楼主一个。但大多数人只要知道怎么用就可以了,就像我们知道1+1=2,但问为什么1+1等于2呢?我想不是一般人能深究的!

不过如果有兴趣深究是一种态度 ,支持!
个人Blog:PlanABC   团队Blog:淘宝UED  专注Web前端技术!

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
如果谁有兴趣一起来讨论就更好了。
呵呵,进一步把兼容区别也整理出来就更好了。赞一个先

TOP

好东西!学习
爱生活 爱拉灯 自然美

TOP

理解了才可以举一反三吗!

TOP