第一百四十六章 伪类选择器(一)

在讲伪类选择器之前,我们要先搞清楚伪类和伪元素的区别。

其实从名称上也就说得差不多了。伪类是通过元素不同的状态或者属性或者特点什么的,是对元素进行一个筛选。所以筛选出来的结果依旧是元素,这就好像给其中具有相同特征的元素,加上了一个类。当然实际上并没有这个类,这一切只不过是我们虚拟出来的,所以叫做伪类。这只是对元素的一种选择和筛选的方法,选出来的结果依旧是普通的网页元素。

伪元素就厉害了,这里原本没有这个元素,它却假装这里存在一个元素,而且就真的显示出来这么一个元素,还能起到各种作用。但是实际上这个元素是不存在,所以它才是伪元素。虽然我们可以通过 CSS 的设置去规定伪元素的各种样式,但是因为这个元素是不存在的,所以我们通过 JS并不能够对它进行选择,也就无法进行进一步的操作。

伪类的前面是一个冒号,就比如:a:hover;而伪元素的前面是两个冒号,就比如 a::before。这也从另外一个角度(我猜的,毫无说服力,但是方便记忆)说明了两者伪装程度的不同。

伪元素,我们是无法进行选择和操作的[1]。而伪类只是对元素的进一步筛选,这在我们使用 jQuery 的时候是非常有用的。

这样区分起来比较复杂,我们换一个角度,比较简单的去理解。前面我们讲使用 jQuery 去设置元素的 CSS 的时候,实际上是修改这个元素的行内样式。而对于伪元素,因为这个元素本身就不存在,我们更没有办法对它进行行内样式的设置,包括那些写在 HTML 标签里面的属性,也无从设置,自然就拿它没辙了。

这里我们就先讲一些我们能够用的到的,并且在 CSS 和 jQuery 里面都有的伪类。注意哦,我们讲的只是在两者中都可以使用的一些而已。那么还有一些,是 CSS 本身实现不了的,但是 jQuery 靠着 JS 的强大就硬生生给实现了,让我们可以更加方便的伪类。但是呢,因为小老鼠很懒惰啊,所以这些不同的地方我们都不去讲,也免得大家给搞混了。(名正言顺的偷懒,嗯,计划通!

然后看了看数量好像还是有点多,我可不想花好几章的时间就讲这些内容,也免得我这部教程影响到安眠药的销量。所以再精简一下,只讲最常用的一些。

啊,说到这里,好像这一章的篇幅又差不多了

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百四十六章 伪类选择器(一)

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏