Vue进阶(幺幺捌):CSS3 - 选择器first-child、last-child、nth-child(2)

最后

正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端资料图.PNG

  background-color: pink;
}
li:last-child { /\*给最后一个列表项目设置样式 IE8不兼容\*/
  background-color: red;
}

解析:  
 一个页面中无论有几个ul列表,只要设置`first-child、last-child`,那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。


### 2.nth-child、nth-last-child (IE8不兼容)


html:



列表

  • 列表项目1
  • 列表项目2
  • 列表项目3
  • 列表项目4
  • 列表项目5
  • 列表项目6

css:




### 3. 对奇数、偶数使用样式


html:



  • 列表项目1
  • 列表项目2
  • 列表项目3
  • 列表项目4
  • 列表项目5
  • 列表项目6

css:




解析: `li:nth-child(odd)`含义:`li`父元素`ul`的儿子中,从1开始数,奇数儿子设置样式为xxx;


当父元素为列表时,因为只有列表项目一种子元素,不会出现问题;当父元素是`div`时,就不止一种子元素,会引起问题。如下:


例如:设置`div`元素中为奇数标题h2背景颜色。


html:



文章标题A

我是一个小段落。。。

文章标题B

我是一个小段落。。。

文章标题C

我是一个小段落。。。

文章标题D

我是一个小段落。。。


css:



h2:nth-child(odd) {
background-color: pink;
}


解析:由于`div`元素下奇数元素为p,偶数元素为后,故 `h2:nth-child(odd)`执行结果为:h2的父元素`div` 的所有儿子中 为奇数的儿子 设置背景颜色;而不是所有h2中为偶数的h2设置样式;  
 解决方法: `nth-of-type`可以避免问题产生。


### 4. nth-of-type(IE8不兼容):只针对同类型的元素进行计算


css:



h2:nth-of-type(odd) { /*所有h2标签中为奇数的设置样式*/
background-color: pink;
}
h2:nth-of-type(even) { /*所有h2标签中为偶数的设置样式*/
background-color: #ccc;
}


解析: `h2:nth-of-type(odd)`含义:在所有h2标签中,只要是奇数h2就设置样式;只针对h2标签,与父元素无关;


### 5. 循环使用样式 li:nth-child(4n+1)


html:



  • 列表项目1
  • 列表项目2
  • 列表项目3
  • 列表项目4

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5

能相关的书籍,以及设计者模式,在实践中都会用的到。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-w55DP0lR-1715842356021)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值