文章目录

基础篇
- :nth-child(n)选择器
- - 示例1
  - 示例2
  - 示例3
- p:nth-of-type(n)选择器
- - 示例4
  - 示例5
进阶篇
- :nth-child(表达式) 和 nth-type-of(表达式)选择器
- - 示例6
  - 示例7
高阶篇
- 示例8

以下选择器都为C3的选择器

示例代码:

<div><ul><li><a href="">第1个a标签</a></li><a href="">第1个盒子外a标签</a><li><a href="">第2个a标签</a></li><a href="">第2个盒子外a标签</a><li><a href="">第3个a标签</a></li><li><a href="">第4个a标签</a></li><li><a href="">第5个a标签</a></li><li><a href="">第6个a标签</a></li></ul></div>

网页样式:

基础篇

:nth-child(n)选择器

示例1

选择的对象: 父盒子下的第n个子元素

 li标签的父元素(ul)的第一个子元素li:nth-child(1){background-color: red;}

示例2

tip:一定要看父盒子是谁,不能只看子元素

a标签的父元素是li,也就是li标签下的第1个子元素
但是ul也是a的父元素,所以ul下的第1个子元素,再次把第1个li标签选中了a:nth-child(1){background-color: red;}

示例3

前面的li标签起到过滤作用

选择li标签的父元素(ul)下的第二个子元素,然后进行判断:if(是li标签){选择}else{我拒绝选择}
比如这个例子父元素的第二个元素不是li标签,是a标签,则不选择li:nth-child(2){background-color: red;}

p:nth-of-type(n)选择器

示例4

选择的对象: 父盒子下的第n个p标签(p标签可以改为任意标签或者其他选择器)

选择li标签的父盒子(ul)下的第一个li标签li:nth-of-type(1){background-color: red;}

示例5

tip:同样一定要看父盒子

选择a标签父盒子(li)下的第一个a标签
同时a标签的父盒子还有(ul),所以ul下的第一个a标签也被选中a:nth-of-type(1){background-color: red;}

进阶篇

:nth-child(表达式) 和 nth-type-of(表达式)选择器

选择的对象: 父盒子下的第(表达式)个子元素
表达式个子元素???这是啥意思呢???
表达式可以写有关n的表达式 {n从0开始} (如:(2n-1),(2n),(3n+1),(-n+5),(n-3)等)
一定注意: 表达式中必须是(an+b)这样的表达式, 不满足交换律 且 (参数a,b为正负整数)

示例6

但是
nth-child有过滤机制,不为li标签的子标签就不选择了,但是不满足的标签仍占有一个位置
而nth-type-of没有过滤,如果不为li标签的子标签直接跳过,不满足的标签不占有位置
说了这么多,还是来个栗子比较明白[手动狗头]选择元素: 选择前3个li标签
非li标签直接跳过li:nth-of-type(-n+3){background-color: red;}

选择元素: 选择前3个li标签,由于第二个子标签不是li标签,所以就没选
但是
第二个标签仍然占着位置li:nth-child(-n+3){background-color: red;}

说了这么多,我常用的还是:nth-type-of(),因为不用考虑过滤和占位问题
下面附上几个常用的表达式

示例7

       //{n从0开始}//
选择全部li标签
li:nth-type-of(n)选择前x个li标签
li:nth-type-of(-n+x)选择x到最后一个li标签
li:nth-type-of(n+x)选择奇数位的li标签
li:nth-type-of(2n+1)
li:nth-type-of(odd)选择偶数位的li标签
li:nth-type-of(2n)
li:nth-type-of(even)

高阶篇

欢迎来到高阶,既然你已经看到了这里,那么相信你对这个选择器有一定了解
css中的选择器当然不止这一个
那么最高境界自然是-----选择器联用(也叫"指哪选哪")主要是和子代选择器联用
即 : 在不用class和id选择器的情况下选择出任何一个元素

当然class和id选择器是非常重要的, 因为名字直观的特点, 也是我平时用的最多的选择器, 这里只是当做练习整点活,
做正式项目的时候还是要以可读性为最高优先级

示例8

比如以下这个布局

<div><div><div>1</div></div><div><div><div>2</div><div>3</div><div>4</div></div><div><div>5</div></div></div></div>

在不用class和id选择器的情况下选择出任何一个元素

      /* 1 */body>div>div:nth-of-type(1)>div:nth-child(1){background-color: red;}/* 2 */body>div>div>div:nth-of-type(1)>div:nth-of-type(1){background-color: red;}/* 3 */body>div>div>div:nth-of-type(1)>div:nth-of-type(2){background-color: red;}/* 4 */body>div>div>div:nth-of-type(1)>div:nth-of-type(3){background-color: red;}/* 5 */body>div>div>div:nth-of-type(2)>div:nth-of-type(1){background-color: red;}

CSS选择器老起名字太麻烦, 有这一个:nth选择器就够了!相关推荐

excel计算式自动计算_钢筋计算太麻烦？全套钢筋翻样Excel自动计算表，限时分享...
钢筋计算太麻烦?全套钢筋翻样Excel自动计算表,限时分享对于工程人来说,钢筋计算可是个重难点.不知道大伙怎么样,反正老刘一直搞不明白,计算多样又复杂,常常弄得云里雾里. 老刘准备了一套钢筋翻样自动 ...
我们都老得太快，却聪明得太迟
我们都老得太快,却聪明得太迟 2007-08-07 23:03 (分类:默认分类) 把钱省下来,等待退休后再去享受结果退休后,因为年纪大,身体差,行动不方便,哪里也去不成. 钱存下来等养老,结果孩子 ...
我们老得太快，聪明却来得太迟
生命中大部分的美好事物都是短暂易逝的,享受它们,品尝它们,善待你周围的每一个人,别把时间浪费在等待所有难题的"完满结局"上. 把钱省下来,等待退休后再去享受.结果退休后,因为年纪 ...
excel怎么设置自动计算_钢筋计算太麻烦？全套钢筋翻样Excel自动计算表，限时分享...
钢筋计算太麻烦?全套钢筋翻样Excel自动计算表,限时分享对于工程人来说,钢筋计算可是个重难点.不知道大伙怎么样,反正老刘一直搞不明白,计算多样又复杂,常常弄得云里雾里. 老刘准备了一套钢筋翻样自动 ...
Spring整合Struts2框架的第一种方式（Action由Struts2框架来创建）。在我的上一篇博文中介绍的通过web工厂的方式获取servcie的方法因为太麻烦，所以开发的时候不会使用。...
1. spring整合struts的基本操作见我的上一篇博文:https://www.cnblogs.com/wyhluckdog/p/10140588.html,这里面将spring与struts2 ...
c语言网上找程序组合,C语言程序我同学说在网上下的一章一章的小说组合成一个太麻烦，于是爱问知识人...
我同学说在网上下的一章一章的小说组合成一个太麻烦,于是我突发奇想要做一个把记事本中的内容按顺序连接起来的程序,但是运行不了,我怀疑是读写时候指针搞错了,情大侠们帮我看看,小弟感激不尽! #includ ...
能用CSS实现的就不用麻烦JavaScript（Part2）
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群前言凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript 来写.- Atwood定律凡是可以用 ...
android微信刷脸支付宝,录指纹、敲密码太麻烦，OPPO Find X完成安卓首个微信刷脸支付...
原标题:录指纹.敲密码太麻烦,OPPO Find X完成安卓首个微信刷脸支付科技改变生活,最直观的体现就是能够将过去的一些方式摒弃掉,用新科技来替代,最好的代表就是现如今越来越多的人只带一部手机就出 ...
一加手机怎么导出照片_换手机照片、通讯录备份太麻烦，一加手机轻松解决
原标题:换手机照片.通讯录备份太麻烦,一加手机轻松解决随着智能手机的快消化,大家逐渐开始面临许多新的问题,其中一个就是换手机时候的资料备份. 为了解决这个问题,许多厂商都会在手机中内置类似的功能,一 ...

CSS选择器老起名字太麻烦, 有这一个:nth选择器就够了!

文章目录

基础篇

:nth-child(n)选择器

示例1

示例2

示例3

p:nth-of-type(n)选择器

示例4

示例5

进阶篇

:nth-child(表达式) 和 nth-type-of(表达式)选择器

示例6

示例7

高阶篇

示例8

CSS选择器老起名字太麻烦, 有这一个:nth选择器就够了!相关推荐

最新文章

热门文章