我们要讲到的伪类分为两部分，第一部分非常的简单，就是 :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。就是用来选择，符合前面选择器，并且它的父元素中只有这一个子元素；或者它的父元素的子元素里面，只有这一个同类型元素。
反正说来说去，就是先符合前面的选择器，然后看它的父元素所拥有的子元素是怎样的。再去讲谁排第一，谁排最后，是不是仅有一个。
暂无评论内容