02 CSS3-选择器详解（二）

最新推荐文章于 2024-03-30 01:29:51 发布

鸿雁南去情难寄

最新推荐文章于 2024-03-30 01:29:51 发布

阅读量187

点赞数 1

分类专栏： CSS3 文章标签：伪类选择器 css3

本文链接：https://blog.csdn.net/qq_42873753/article/details/84633908

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

选择器详解（二）

一，“-child”类型伪类选择器

1，:first-child

针对父元素的第一个子元素

2，:last-child

针对父元素的最后一个子元素

3，:nth-child（n）

1，针对顺序指定序号的子元素
2，针对奇偶性指定的子元素，odd奇数，even偶数

拓展：

：nth-child(n)

括号中的n 可依据 " αn + β "定律书写

"α"指每次循环中所包含的样式总数
"β"指是循环中所处的位置

示例：

li:nth-child(3n+1)
li:nth-child(3n+2)

4，:nth-last-child(n)

针对逆序指定序号的子元素

5，:only-child

针对只有一个子元素的元素

API权威解释
在这里插入图片描述

二，“-type”类型伪类选择器

1，:nth-of-type

顺序计算子元素奇偶时，只针对同类型的子元素进行计算

2，:nth-last-of-type

逆序计算子元素奇偶时，只针对同类型的子元素进行计算

API权威解释
在这里插入图片描述

示例：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鸿雁南去情难寄

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css3 伪元素和伪类选择器详解

01-19

伪类选择器：CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active` 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是...

详解CSS3选择器:nth-child和:nth-of-type之间的差异

12-13

然后两个选择器相对应的CSS代码如下： p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色：尽管上面两个demo...

参与评论您还未登录，请先登录后发表或查看评论

css3奇偶选择

沧笙踏歌的博客

01-27

917

css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可

css奇数偶数选择器_超详细！如何学习 CSS？需要学习那些知识点？

weixin_39797693的博客

11-29

281

初试css3的nth-child选择器

wxmmmmmm的博客

05-26

406

最近在看代码模板时遇到了nth-child，觉得挺好玩就查了一下。nth-child：规定属于其父元素的子元素的css样式。参数可以是：数字+n如下图意思为main-timeline的子元素，下标为2的倍数的所有timeline的padding：0 0 0 50px；参数还可以是：odd和even如下图odd为奇数，even为偶数。分别定义了父元素下的子元素，下标为奇数和偶数两种不同的背景色。...

5.携程网头部

天蓝蓝风轻轻

06-13

348

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

CSS3设置圆角导航栏、CSS3选择前面两个元素-n+2，一文说清

热门推荐

欢欢的博客

10-27

3万+

first-child、last-child、nth-child、nth-last-child、nth-of-type first-child，last-child可直接使用，例如 ul li:first-child，ul li:last-child，但是其余的选择都需要在后面加入()，例如ul li:nth-child(n); ->选中ul元素下面第n个li元素，且n是从1开始的，这里和JavaScript中的eq()不同，eq选择也是从第1个开始的，但是索引值是从0开始 1、fi...

css 中 nth-child、first-child、last-child 的使用（选中第一个，第几个，第几个到第几个，最后一个等）

KLW75

08-11

1万+

可以配合 li 标签使用，选择一列中的哪些标签。 1.first-child选择列表中的第一个标签 2.last-child 选择列表中的最后一个标签 li:first-child{color:red} li:last-child{color:pink} 3.nth-child(n) 这里的n为数字，表示选择列表中的第n个标签例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数，选中2、4、6……...

:nth-child :nth-last-child 和 :last-child

weixin_30439131的博客

04-27

199

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n可以是数字、关键词或公式。 p:nth-child(2) 可以理解为：如果 p 的父元素的第2个子元素是 p，那么为这个 p 单独设置样式注意：括号里面是从1开始的使用公式 (an+b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。 :nth...

CSS3 :nth-child()伪类选择器

weixin_34326429的博客

12-27

350

CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child(...

3n+1问题

weixin_42214549的博客

07-21

2303

任意大于1的自然数n 奇数，n变为3n+1 否则变为n/2 如：3-10-5-16-8-4-2-1 要求：输入n，输出变化的次数。n<=10^9 法1：法2：while循环语句注： long long n=n2; 输入987654321不会溢出。 ...

css奇数偶数选择器

web前端开发

11-30

3万+

前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。主要用的：:nth-of-type或者:nth-c...