css3 伪类选择器快速复习

MasonEast 发布于2019-08-30 15:44 / 1707人阅读

摘要：前言如果说作为前端开发的基本功那么选择器就是基础中的基础如果你在复写或者学习这些容易令人混淆的选择器那么你就来对地方了我的老伙计本篇文章会直接了当的比较它们的特性帮助你快速的掌握它们这两个选择器会匹配一

前言

如果说 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

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

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

被前面的选择器匹配此例中是 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 给固化了, 因为这个东西从数学的角度来看非常容易摸清楚规律, 例如有如下的代码:

第一行

第二行

第三行

思考模式:

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

标签

从下标 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 匹配的依然是同一组兄弟元素, 不过有趣的是 nth-child 会利用选择器进行过滤, 但是应用样式的时候却不把样式应用到匹配的元素上:

上图中

中的两组

元素被视为兄弟元素进行匹配, 但是有趣的是作为第三个

元素 "第三行" 也被匹配到了, 这说明在应用样式会直接应用在一组兄弟元素中而不是被匹配到的

元素, 不过需要注意的是如果图片中的 "第三组" 中的

是

的话类型不同样式是不会被应用的.

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

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

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

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

nth-of-type 匹配:

同一组中相同类型的兄弟元素

匹配对应公式计算值的元素

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

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

云服务器 GPU云服务器管理器快速打开选择器派生选择器省市选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116163.html

html5与css3阶段复习题

摘要：将超出对象尺寸的内容进行裁剪，不会出现滚动条。过渡效果使用动画使用需要触发一个事件才会随着时间改变其属性在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素属性，达到一种动画的效果动画不需要事件触发，过渡需要。 1.请列出核心选择器、层次选择器有哪些 (5) 核心选择器：id选择器、class选择器、标签选择器、逗号选择器、普遍选择器层次选择器：子代选择器、后代选择器、下...

techstay 2019-08-30 15:44 评论0 收藏0
css选择器

摘要：前言选择器是前端的基本功只要你是一个前端这个一定要掌握今天之所以要重温一下选择器主要是和大家再复习一下选择器中的一些常用符号的使用例如等的使用之所以要复习呢是因为我一个写后端的哥们前端写的也很好但是他今天突然问我中加号和大于号是啥意思我说这前言 css选择器,是前端的基本功,只要你是一个前端,这个一定要掌握!今天之所以要重温一下css选择器,主要是和大家再复习一下css选择器中的一些常用符号...

番茄西红柿 2019-04-23 13:36 评论0 收藏0
立即收藏！2019前端工程师如何应对裁员潮？

摘要：小肆也是被这些消息吓得瑟瑟发抖，不过生活就是这样，谁也无法预料到第二天会发生什么，只有把握好现在，积极为未知的明天做好准备才是正道。这里小肆给大家几点建议对于目前在职的同学，保持学习，提升自己核心竞争力，让自己成为不会被轻易替代的那个人。前言 2019互联网寒冬已至，大批互联网公司纷纷裁员，其实从2018年下半年开始，裁员和市场部收缩预算就经常被提及，阿里巴巴，华为都传出了收缩招聘的...

songjz 2019-08-30 15:55 评论0 收藏0