如何使用css3伪类选择器-创新互联

如何使用css3 伪类选择器？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

first-child & last-child

这两个选择器会匹配一组兄弟元素中的第一个:

注意: 要想使得该选择器起作用实际上需要满足三个条件:

• 被前面的选择器匹配 此例中是p

• 是一组兄弟元素

• 是第一个(或者最后一个)元素

last-child 在此不多赘述, 区别就是从后向前进行匹配.

first-of-type & last-of-type

这两个选择器会匹配同一组类型中的第一个(最后一个)而不理会该元素的位置是否真的是在该组元素的第一个(最后一个):

注意: 要想使得该选择器起作用实际上需要满足两个条件:

• 被前面的选择器匹配 此例中是p

• 是一组兄弟元素

last-of-type 在此不多赘述, 区别就是从后向前进行匹配.

only-child & only-of-type

only-child 匹配那些没有兄弟元素的元素, 换句话说匹配那些 "孤儿" 元素:

上图中被 "孤立" 的元素有第一个

和嵌套的 它们都被选择器匹配到了.

only-of-type 匹配一组兄弟元素中类型类型的元素:

因为第一个

和第二个

以及最后的 在对应的父元素下类型都是的所以它们会被选择器匹配到.

nth-child & nth-last-child

这些伪类选择器最有意思的一点就是可以传入一个公式an+b, 根据这个公式来匹配元素. 这个公式有很多玩法, 导致有很多人将这个公式的所有组合以及所匹配的内容背下来.

实际上我们的思考方式被 css 给固化了, 因为这个东西从数学的角度来看非常容易摸清楚规律, 例如有如下的代码:

  
第一行
  
第二行
  
第三行

思考模式:

1. 先收集匹配到的元素, 在这个例子中就是三个

   标签

2. 从下标 0 后数到 2 表示

   的个数, 依次带入公式求值

3. 将对应下标的元素进行匹配(元素下标从1开始数)

结果:

不过不要忘记了nth-child 匹配的依然是同一组兄弟元素, 不过有趣的是nth-child 会利用选择器进行过滤, 但是应用样式的时候却不把样式应用到匹配的元素上:

上图中

li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  color: red;
}

A list of four items (styled):

  
One
  
Two
  
Three
  
Four


A list of two items (unstyled):

  
One
  
Two