CSS的伪类与伪元素

摘要

伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。其由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。

很多时候,多数人都会把伪类伪元素混为一谈。其实,伪类与伪元素本质上是两种东西。

伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。其由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。

伪元素通常由二个冒号::开头,通常在页面中添加视觉元素用的,其无法通过鼠标直接在页面中选中。冒号的多少不能成为我们区别伪类与伪元素的依据。因为为了兼容,有一些伪元素也可以使用一个冒号:开头,如:after和:before。

我们在使用伪类的时候,通常都不用太关心其先后顺序。对于一般的标签,确实没有必要在意这个细节。但是,凡是都有例外,无形中应验了中国的一句古话:万事无绝对。

对于a标签,其独特的规则被广大程序员称戏称为爱憎分明式(love and hate),其实是“劳动人民”为了便于记忆而发明的。当我们在使用时,其顺序必须为a:link、a:visited、a:hover、a:active。当然,我们多数时候并不一起使用,多数时候我们只会设置a标签的样式和a:hover的样式。

对于伪元素,我们要特别、特别注意一点,很多时候我们在使用:after和:before时候没有效果,往往是因为我们忘记了一个极其重要的属性content。换言之,content是某些伪元素的必备属性。

很多人以为任何标签都可以使用伪类与伪元素,事实上这并不正确。所以,当我们发现在使用了某些伪元素后没生效,应该求证一下该元素是否本身就不支持该伪类或伪元素。

伪类与伪元素使用起来很方便,在写页面的时候它能够简化页面的HTML标签。如果能合理使用伪类与伪元素,能够极大优化页面整体结构和大小。伪元素好用但也不能滥用,毕竟伪元素只是页面辅助性视觉元素。如果内容本身是页面内容,需要有动态交互建议不要使用伪元素,以免带来交互上的问题。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: