CSS中first-child和nth-child的讲解
来源:互联网 发布:画设计图用什么软件 编辑:程序博客网 时间:2024/06/05 11:47
first-child
E:first-child
是伪类选择器,很多人都知道它的存在,但是在使用时,可以仍存在误解。
说明
匹配父元素的第一个子元素E
从说明可以看出E是你要选择的第一个子元素,而不是父元素。一开始,误以为E:first-child
是E的第一个子元素。
举个例子:
- 1
- 2
- 3
- 4
- 5
假设选择的是第一个li
元素,则选择器应为li:first-child
,而不是ul:first-child
- 1
- 2
- 3
- 4
- 5
- 6
这时选择第一个p
元素,应用p:first-child
则会出现错误,因为p的父元素是div,而对于div来说,它的第一个子元素不是p,而是h1,所以如果选择器p:first-child
,则会出错。
同理,E:last-child``E:only-child
与上面的一样,E元素必须是其父元素的最后一个子元素或唯一一个子元素才可以。
:nth-child(n)
说明
匹配父元素的第n个子元素E
E也是子元素,而且也只能匹配父元素下第n个子元素。n是从1开始计数
- 1
- 2
- 3
- 4
- 5
- 6
依然是上面的例子,如果这次要选择第一个p元素,则可以使用p:nth-child(2)
,因为第一个p元素在父元素<div>
下是第二个子元素,所以n需要取值为2。
所以要记住:E:nth-child(n)
中,E是你要选择的子元素,而n是E元素的父元素下,E元素所处的顺序数。
后记
此博文就是在练习时候发现关于css选择器方面理解不够深刻时,理解练习后所写的。所以关于css的选择器不能只停留在懂,还得多练。
阅读全文
0 0
- CSS中first-child和nth-child的讲解
- CSS中first-child和nth-child的讲解
- css:first-child、last-child、nth-child、 nth-last-child
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- 详解CSS中:nth-child的用法
- 详解CSS中:nth-child的用法
- 详解CSS中:nth-child的用法
- 详解CSS中:nth-child的用法
- 详解CSS中:nth-child的用法
- 详解CSS中:nth-child的用法
- 详解CSS中:nth-child的用法
- 详解CSS中:nth-child的用法
- 详解CSS中:nth-child的用法
- css的first-child
- CSS3中first-child、last-child、nth-child、nth-last-child
- css :nth-child和:nth-of-type的区别
- 关于css选择器中nth-of-type和nth-child的区别
- CSS3中:nth-child和:nth-of-type的区别
- java vs javaw vs javaws
- CSS实现图片背景填充的六边形
- PLSQL Developer 连接oracle 以及遇到的问题
- Vue.js国际化中的几个小问题
- oracle11g安装(win10)
- CSS中first-child和nth-child的讲解
- 11.18--多对多关联映射
- MATLAB中ezplot函数
- 指令系统
- C#算法系列(4)——简单排序算法小结
- 宏定义中的特殊参数(#、##、...和__VA_ARGS__)
- Android碎片事务提交transaction.commit()和transaction.commitnow()的区别以及源码完全解析
- HTML-图像的使用(img标签和map标签的使用)
- 算法笔记1