css3 伪类选择器快速复习

时间 2019-11-16

标签 css3 css 选择器快速复习栏目 CSS 繁體版

原文原文链接

前言

若是说 css 做为前端开发的基本功, 那么 "选择器" 就是基础中的基础. 若是你在复写或者学习这些容易使人混淆的选择器, 那么你就来对地方了, 个人老伙计.css

本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们:html

first-child
last-child
first-of-type
last-of-type
only-child
only-of-type
nth-child
nth-last-child
nth-of-type
nth-last-of-type

first-child & last-child

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

注意: 要想使得该选择器起做用实际上须要知足三个条件:学习

被前面的选择器匹配此例中是 p
是一组兄弟元素
是第一个(或者最后一个)元素

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

first-of-type & last-of-type

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

注意: 要想使得该选择器起做用实际上须要知足两个条件:htm

被前面的选择器匹配此例中是 p
是一组兄弟元素

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

only-child & only-of-type

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

上图中被 "孤立" 的元素有第一个  和嵌套的  它们都被选择器匹配到了.开发

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

由于第一个 和第二个  以及最后的  在对应的父元素下类型都是惟一的因此它们会被选择器匹配到.

nth-child & nth-last-child

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

实际上咱们的思考方式被 css 给固化了, 由于这个东西从数学的角度来看很是容易摸清楚规律, 例若有以下的代码:

<style>
  p:nth-child(2n+1){
    color:blue;
  }
</style>
<body>
  <p>第一行</p>
  <p>第二行</p>
  <p>第三行</p>
</body>

思考模式:

先收集匹配到的元素, 在这个例子中就是三个  标签
从下标 0 后数到 2 表示  的个数, 依次带入公式求值
将对应下标的元素进行匹配(元素下标从1开始数)

结果:

公式	解释
2n	全部偶数元素
2n+1	全部奇数元素
n & n+1	全部元素
n+2	第二个元素后的元素(包括第二个元素)
n+3	第三个元素后的元素(包括第三个元素)
0n	啥都匹配不到
3n+4	4,7,10,13 ....
1	只匹配第一个元素
-n+2	只匹配前两个元素
nth-child(odd)	奇数元素
nth-child(even)	偶数元素

在这个例子中展现了 nth-child 的几种常见的匹配规则, 包括不会匹配到任何内容的 0n:

nth-child 在样式的应用上比较特殊, 在下面的这个例子中 div 做为非 p 元素是不会被 p:nth-child 匹配到的. 所以 div 打破了 p 元素的连续性, 按照常理来讲在 div 后的 p 元素应该从新开始匹配 第四行 才会被应用样式, 可是咱们看到的却不是这样 div 后的 p 被匹配到了.

若是无视元素的名称的差别, 含有 第三行 的 p 标签确实是 2 的倍数, 也就是说 nth-child 会统计全部相邻的兄弟元素而无视选择器, 而应用样式的时候会使用选择器进行过滤.:

上图中 <div> 中的两组  元素被视为兄弟元素进行匹配, 可是有趣的是做为第三个  元素 "第三行" 也被匹配到了, 这说明在应用样式会直接应用在一组兄弟元素中而不是被匹配到的  元素, 不过须要注意的是若是图片中的 "第三组" 中的  是 <div> 的话类型不一样样式是不会被应用的.

nth-last-child 就是从后向前的版本, 这里就不在详细举例了:

MDN 上还给出了一个有意思的例子, 能够根据元素的数量来控制元素的样式:

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

<h4>A list of four items (styled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>A list of two items (unstyled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>

nth-of-type & nth-last-of-type

nth-of-type 匹配:

同一组中相同类型的兄弟元素
匹配对应公式计算值的元素

你注意到了吗 nth-of-type 和 nth-child 是有些区别的, 计算完成后样式的应用到了被匹配的元素身上, 而不是兄弟元素上.

nth-last-of-type 是一个从后向前的版本, 这里不在详细介绍: