浅谈css伪类和伪元素的区别、优先级

html-css031

浅谈css伪类和伪元素的区别、优先级,第1张

css的伪类和伪元素在我们平常的工作中有着很广泛的应用,比如:hover、:active、:after等等,但是大部分人可能并不清楚伪类和伪元素的具体区别,所以我们今天来简单的梳理一下。 css伪类的定义 由于css2.1中伪类和伪元素的定位并无区别,所以我们直接引用css3中对于伪类的定义(引入来源w3c)定义:引入伪类概念是用于选择不存在于DOM树中的信息或那些不能够通过常规css选择器得到的信息。(比如:hover,:active就属于不在于dom中的信息,nth-child()属于不能够通过常规css选择器得到的信息) 伪类由“冒号”(:)+伪类的名称和伪类括号内的可选参数组成。(伪类括号内的可选参数指:nth-child(n)里的n) 所有的常规选择器都可以在任何位置使用伪类。伪类名称不区分大小写。一些伪类是互斥的,另一些伪类可以同时应用于同一个元素。为了满足用户在操作DOM时产生的DOM结构改变,伪类可以是动态的。 css伪元素的定义定义:伪元素用于创建和访问文档中不存在的抽象元素。例如,文档语言不提供访问元素内容的第一个字母或第一行的机制。使用伪元素可以访问到这些。伪元素还可以让我们访问文档中原本不存在的抽象元素(例如,::before和::after)。 伪元素由两个冒号(::)后跟伪元素的名称组成。 ::两个冒号这种格式,是为了区别伪类和伪元素。与现有样式表的兼容性,考虑到兼容性有部分伪元素可以同时使用1个或者2个冒号,(即:first-line,:first-letter,:before和:after)。对于css3中引入的新伪元素,则必须要使用2个冒号。 每个选择器只能出现一个伪元素,并且伪元素要位于选择器的后面。注意:此规范的未来版本可能允许每个选择器使用多个伪元素。 css伪类和伪元素的区别 伪类和伪元素的语法结构不同,伪类为冒号(:)加伪类名称,伪元素为两个冒号(::)加伪元素名称,不过为了考虑兼容性(css2.1中伪类和伪元素都是一个冒号),部分伪元素也支持一个冒号的写法,例如(:after,:before,:first-line,:first-letter)。 一个选择器只能使用一个伪元素,但是可以使用多个伪类。 伪类和伪元素的优先级不同,大部分伪类为0-1-0,伪元素则为0-0-1。参考 css选择器的优先级 https://www.chentugen.com/archives/12/

CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value},简单地用一个半角英文冒号(:)来隔开选择符和伪类。

CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的CSS伪类。

◆link用在为访问的连接上。

◆visited用在已经访问过的连接上。

◆hover用于鼠标光标置于其上的连接。

◆active用于获得焦点(比如,被点击)的连接上。

例如:

a:link{color:red }  

a:visited{color:green}  

a:hover{color:blue}  

a:active{color:orange}

CSS伪类用于向特殊状态的选择器添加特殊效果,使用最多的伪类是锚伪类。

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移动到链接上,此伪类不止限于超链接上,其他元素也可使用

a:active 选定的链接

注意:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的;a:active 必须被置于 a:hover 之后,才是有效的;伪类名称对大小写不敏感。

伪类的使用是在选择器后添加伪类,如selector:pseudo-class{color:red}, selector.class:pseudo-class{color:red}

注:pseudo-class表示伪类,但并无此伪类,selector表示选择器。

CSS的伪类还有其他几种:

:active 向被激活的元素添加样式。

:focus 向拥有键盘输入焦点的元素添加样式。IE中必须声明 <!DOCTYPE>,IE8以下不支持。

:hover 当鼠标悬浮在元素上方时,向元素添加样式。

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式。

:first-child 向元素的第一个子元素添加样式。IE中必须声明 <!DOCTYPE>。

:lang 向带有指定 lang 属性的元素添加样式。IE中必须声明 <!DOCTYPE>,IE8以下不支持。

CSS中,还有伪元素,形态及使用方法类同伪类。

:first-letter 向文本的第一个字母添加特殊样式。

:first-line 向文本的首行添加特殊样式。

:before 在元素之前添加内容。

:after 在元素之后添加内容。