CSS3 :nth-child() 选择器

nth-child() 选择器是选择父标签的第几个元素

菜鸟教程练习（就不放图片了）
p:nth-child(2) 选择父元素的第二个为p标签的元素。如果第二个标签不是p就不起作用

<style>
p:nth-child(2)  #未指定父级 所有标签的第二个为P的变红  指定 div p:nth-child(2)  div的第二个元素变红
{background:#ff0000;
}
</style>
</head>
<body><h1>这是一个标题</h1>
<p>这是第一个段落。</p>   #变红
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p><p><b>注意:</b> Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.</p>
<div>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>  #变红
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</div>

他会选择后代的所有标签如果只想选中子代的标签可以使用子代选择器 .class>p:nth-child(1)

扩展：

CSS选取第n个标签元素
最近做一个项目，碰到这样的需求，需要选取某个元素的倒数第几个标签元素，想让他显示不同的样式

1、first-child

first-child表示选择列表中的第一个标签。例如：li:first-child{background:#fff}

2、last-child

last-child表示选择列表中的最后一个标签，例如：li:last-child{background:#fff}

3、nth-child(3)

表示选择列表中的第3个标签，例如：li:nth-child(3){background:#fff}，代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。

4、nth-child(2n)

这个表示选择列表中的偶数标签，即选择第2、第4、第6…… 标签，例如：li:nth-child(2n){background:#fff}

5、nth-child(2n-1)

这个表示选择列表中的奇数标签，即选择第1、第3、第5、第7……标签，例如：li:nth-child(2n-1){background:#fff}

6、nth-child(n+3)

这个表示选择列表中的标签从第3个开始到最后。

7、nth-child(-n+3)

这个表示选择列表中的标签从0到3，即小于3的标签。

8、nth-last-child(3)

这个表示选择列表中的倒数第3个标签。

CSS3 :nth-child() 选择器相关推荐

nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
css3 nth child 偶数,转载：CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div><section>section 1</section><section>section 2</sec ...
CSS3之利用选择器和content属性在页面中插入内容
CSS3之使用选择器在页面中插入内容 1. 使用选择器来插入内容:例, h2:before{ content:'COLUMN'; color:white: background-color:o ...
html的选择器child,css child选择器妙用
css child选择器妙用:倒数第n,奇数列,偶数列,倍数列,第n个到最后,第一个到n 1.first-child first-child表示选择列表中的第一个标签. 2.last-child la ...
CSS基础(part21)--CSS3伪元素选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案 CSS3伪元素选择器伪类选择器: 选择符简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容伪类选择 ...
CSS3概述、选择器、兼容性、样式
一.css3简介 1.什么是css3 CSS 用于控制网页的样式和布局 CSS3 是最新的 CSS 标准 CSS3是CSS2的升级版 2.css3的功能选择器盒模型背景和边框文字特效 2D/3 ...
css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
CSS3新增的选择器有哪些？
CSS3新增的选择器有哪些?(逆站班学习论述) css3选择器在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 1. p~ul选择前面有"< p >"元 ...
css伪类选择器记忆技巧,CSS3 伪类选择器 :nth-child()
:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0 ...

CSS3 :nth-child() 选择器

扩展：

CSS3 :nth-child() 选择器相关推荐

最新文章

热门文章