CSS中first-child和nth-child的讲解
来源:互联网 发布:sql数据库服务器搭建 编辑:程序博客网 时间:2024/06/13 04:50
:first-child
E:first-child
是伪类选择器,很多人都知道它的存在,但是在使用时,可以仍存在误解。
说明
匹配父元素的第一个子元素E
从说明可以看出E是你要选择的第一个子元素,而不是父元素。一开始,误以为E:first-child
是E的第一个子元素。
举个例子:
<ul> <li>l1</li> <li>l2</li> <li>l3</li></ul>
假设选择的是第一个li
元素,则选择器应为li:first-child
,而不是ul:first-child
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p></div>
这时选择第一个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开始计数
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p></div>
依然是上面的例子,如果这次要选择第一个p元素,则可以使用p:nth-child(2)
,因为第一个p元素在父元素<div>
下是第二个子元素,所以n需要取值为2。
所以要记住:E:nth-child(n)
中,E是你要选择的子元素,而n是E元素的父元素下,E元素所处的顺序数。
后记
此博文就是在练习时候发现关于css选择器方面理解不够深刻时,理解练习后所写的。所以关于css的选择器不能只停留在懂,还得多练。
这里推荐一个练习css选择器的网站:http://flukeout.github.io/
通过可视化的界面,让大家能知道自己的选择器写完后,所选的元素。
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的区别
- oracle的license和正版使用问题(收集整理)
- CompletableFuture执行线程的一次研究
- shell 30分钟删除文件demo
- oracle11g OCP 认证 1Z0-052考试笔记3
- Eclipse - changing font size in project/package explorer
- CSS中first-child和nth-child的讲解
- 设计模式--命令模式
- Windows同时使用Python 2.7和Python 3.5以及pip
- java中使用反射获取对象的属性和属性值
- J2SE第四章——异常(二)
- Apache tags-tiles翻译
- HDU1004
- 元素和鼠标事件的距离属性
- Mac环境下svn的使用