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

我们要讲到的伪类分为两部分,第一部分非常的简单,就是 :header 它表示标题元素,h1 到 h6 都算。这个效果我们通过书写多条的选择器一样可以达到,但是用这个伪类就方便一些,简短一些,反正就是可以偷懒,可以偷懒就很爽~

然后是第二部分,是子元素相关的一些选择器。它们也不复杂,就是数量稍微有点多,不过好在常用的也就几个。(既然讲到这里了,还是索性都给它们列出来吧。

首先是最常用的两个,:first-child 和 :last-child。我认真的思索了半秒,这几个单词应该都是初中词汇,而初中属于九年义务教育,所以四舍五入你们应该都认识这些单词。那它们的意思应该可以理解的差不多,就是第一个子元素和最后一个子元素。

它们的意思是:它们前面选择器,所选中的那些元素中,又恰好是它父元素中,第一个或者最后一个子元素。总结一下,要点有两个,首先这个元素要符合前面的选择器,然后这个元素在它的父元素之中,应该是排在第一的子元素(:first-child)或者排在最后的子元素(:last-child)。

上面这两个伪类非常有用,比如一系列连续的元素,它们中的第一个或者最后一个可能具有不同的样式,以便让所有的元素达到相同的效果。什么,我说的不合理吗?比如我们在写导航的时候,每一个导航项都是仅仅左侧有边框,这样看起来就是每两个元素之间都有一条竖线分隔,挺好的,但是所有导航向的最左侧有一根竖线,而在右侧没有(没听懂我在说什么的,可以自己写一下)。这时候我们就可以通过上面两个选择器,对最前面或者最后面的元素进行一个单独的设置,比如让第一项没有边框,或者让最后一项左右同时具有边框。

好了,最简单的我们已经了解了,然后我们开始增加条件。如果这个元素的父元素中,子元素具有多种类型。这么说起来好拗口,其实就是这个元素的兄弟元素们,具有多种类型。但是我们希望只考虑其中同类型的元素。比如我在网页中的内容区,希望只考虑其中的段落元素,于是我们有下面两个伪类选择器::first-of-type 和 :last-of-type。就是第一个同类型的元素和最后一个同类型的元素。那么参照上面也归纳一下要点:首先要符合前面的选择器,这是肯定的。然后在它的父元素之中,只看和它相同类型的元素,它排在第一(:first-of-type)或者最后(:last-of-type)。大家体会一下和上面的区别,这时候就不一定是它父元素中的第一个或者最后一个元素了。或者说,这两种选择器可以涵盖上面两个选择器所对应的情况,但是反过来不行。

上面说的都是多个元素的情况,但如果只有一个元素,就是它是它父元素的独生子,上面四个伪类选择器所能够选中的,都只有这个元素。

或者我们还有这样两个伪类选择器::only-child 和 :only-of-type。就是用来选择,符合前面选择器,并且它的父元素中只有这一个子元素;或者它的父元素的子元素里面,只有这一个同类型元素。

反正说来说去,就是先符合前面的选择器,然后看它的父元素所拥有的子元素是怎样的。再去讲谁排第一,谁排最后,是不是仅有一个。

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

打赏

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

支付宝扫一扫打赏

微信扫一扫打赏