css3 伪类选择器快速复习小结


Posted in HTML / CSS onSeptember 10, 2019

前言

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

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

  • 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

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

css3 伪类选择器快速复习小结

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

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

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

css3 伪类选择器快速复习小结

first-of-type & last-of-type

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

css3 伪类选择器快速复习小结

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

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

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

css3 伪类选择器快速复习小结

only-child & only-of-type

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

css3 伪类选择器快速复习小结

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

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

css3 伪类选择器快速复习小结

因为第一个<p> 和第二个 <p> 以及最后的 <span> 在对应的父元素下类型都是唯一的所以它们会被选择器匹配到.

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>

思考模式:

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

结果:
 

css3 伪类选择器快速复习小结

   
公式 解释
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) 偶数元素

css3 伪类选择器快速复习小结

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

css3 伪类选择器快速复习小结

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

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

css3 伪类选择器快速复习小结

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 匹配:

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

css3 伪类选择器快速复习小结

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

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

css3 伪类选择器快速复习小结

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 #HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 #HTML / CSS
移动端适配 使px自动转换rem
Aug 26 #HTML / CSS
CSS3 毛玻璃效果
Aug 14 #HTML / CSS
详解css position 5种不同的值的用法
Jul 30 #HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 #HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 #HTML / CSS
You might like
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP递归算法的简单实例
2019/02/28 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python实现简易动态时钟
2018/11/19 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python如何实时获取tcpdump输出
2020/09/16 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
前台文员岗位职责
2013/12/28 职场文书
高一历史教学反思
2014/01/13 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
律师催款函范文
2015/06/24 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python