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

html-css09

浅谈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/

nth-child这个倒是可以换个思路实现,这个一般用在ul li标签中,奇偶行的mouseover效果,ul li:nth-child(odd){color:#fff}/*选取偶数*/

ul li:nth-child(even){color:#fff}/*选取奇数*/

以上的是兼容的写法,改进后的写法如下:

ul li:first-child{color:#fff}/*选取第一个li*/

ul li:first-child+li+li{color:#fff}/*选取第三个li*/

依次还可以有第5个li,等等,好在开发中li的个数一般不会多,虽然是个比较麻烦的做法,好歹能解决问题,至于after,before之类的,也不能说没法实现,也是曲线救国的方法,有个简单的思路你可以参考下,你应该清楚的是after是主样式加载完之后才表现的,after说白了也是一个样式表,或者说是个额外的class,那么好了,后期我们通过JS可以添加这个Class了,具体这个after通过鼠标点击添加呢 还是download时候就加载这个就看你了,以上为思路,仅供参考

可以使用csshover.htc文件。

是国外一名作者写的,用于解决低版本IE不支持a以外的元素使用:hover 、:active 伪类的问题。

简单的说下使用方法:

下载csshover.htc文件至网站目录,然后在CSS文件中引用它就好了。

如:

li:hover {

color:red

behavior:url(csshover.htc)

}

亦或者建立一个标签组来应用它:

div , li , h1 , h2 {

behavior:url(csshover.htc)

}

这样你就不用在每一个需要应用的元素内部写代码了。

建议:

尽量用具体的选择器,避免用*号。建议的写法如下:

#nav ul li ,#sidebar ul li , #page-nav .menu span {

behavior:url(csshover.htc)

}

这样写,可以避免程序历遍整个网页所带来的资源消耗。

推荐中小型网站使用。大型网站谨慎使用,尽可能使用js解决hover兼容问题。

更多的使用方法,可以在网上搜一下,有很多文章可供参考。

文件下载请去原作者网站:http://peterned.home.xs4all.nl/csshover.html