nth-child（n）、first-child、last-child用法

注：nth-child(n)选择器匹配父元素中的第n个子元素。
n可以是一个数字，一个关键字，或者一个公式。

nth-child（n）用法：
1、nth-child(3)
表示选择列表中的第3个标签，代码如下：

li:nth-child(3){background:#fff}

2、nth-child(2n)
表示选择列表中的偶数标签，即选择第2、第4、第6…… 标签，代码如下：

li:nth-child(2n){background:#fff}

3、nth-child(2n-1)
表示选择列表中的奇数标签，即选择第1、第3、第5、第7……标签，代码如下：

li:nth-child(2n-1){background:#fff}

4、nth-child(n+3)
表示选择列表中的标签从第3个开始到最后，代码如下：

li:nth-child(n+3){background:#fff}

5、nth-child(-n+3)
表示选择列表中的标签从0到3，即小于3的标签，代码如下：

li:nth-child(-n+3){background:#fff}

6、nth-last-child(3)
表示选择列表中的倒数第3个标签，代码如下：

li:nth-last-child(3){background:#fff}

first-child用法：
1、first-child
first-child表示选择列表中的第一个标签。代码如下：

li:first-child{background:#fff}

last-child用法：
1、last-child
last-child表示选择列表中的最后一个标签，代码如下：

li:last-child{background:#fff}

加入要让第二个 th 占table表格总宽度的50%. 复制代码代码如下: <style type = “text/ css ”> table tr th: nth - child (2) </style> 第一个第二个第三个 : nth - child (n) 选择器匹配属于其父元素 (在这里就是tr)的第 N （这里选择第2个）个 子元素 （这里 子元素 是th），不论元素的类型。选择器匹配父元素中的第 n 个 子元素 ，元素类型没有限制。n可以是一个数字，一个关键字，或者一个公式。注释：n从1开始p: nth - child (数字)p: nth - child (3)表示给第三个元素（P3）添加背景色接着上面的示例，如果p 元素前面还有一个元素 ,如下图所示，P2被添加了背景色，而不是P3因为这里的p: nth - child (1) 为h1 元素，p: nth - child (2)才为p 元素首先定位p的父元素，父元素下的第n个元素为当前元素， css 才会生效。最经遇到一个first- child 、last- child 、 nth - child ()失效的问题，我相信还有很多人都会遇到，下面我就分2类来简单的说明下 ①first- child 和last- child 失效第一种情况是first- child 和last- child 问题，话不多说先贴代码 <!DOCTYPE html> <meta... 该选择器选择的是A选择器选择的元素的父元素中的第n个 子元素 ，而且在匹配的阶段并没有元素类型的限制，但是，到了样式设置的阶段，却又有了元素类型的限制，比如p: nth - child (n)匹配p 元素的父元素中的第n个元素，如果第n个元素刚好是p，则进行样式设置，如果不是p，比如是h2，则不会进行相关的样式设置。刚接触到 CSS 的: nth - child 伪类选择器的时候，也是晕头转向的，搞不清楚“: nth - child (n) 选择器选择的是其父元素中的第 n 个 子元素 ,而且元素没有类型限制”这句话是什么意思。 css 如何获取 第几个 元素？下面本篇文章就来给大家介绍一下使用 CSS 获取 第几个 元素的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1、:first- child 选择器:first- child 匹配第一个 子元素 。例如：li:first- child {background:#fff}2、:last- child 选择器:last- child 用来匹配父元素中最后一个 子元素 ，例如：li:las... htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档body,p{margin:0;padding:0;}p{background-color:red;width:200px;height:200px;positi... 本文实例讲述了jQuery中:last- child 选择器用法。分享给大家供大家参考。具体分析如下：此选择器能够匹配父元素的最后一个 子元素 。注意:last只选取一个元素，而此选择符将匹配每个父元素的最后一个 子元素 。语法结构: 代码如下:$(“:last- child ”) 此选择器一般也要和其他选择器配合使用，比如类选择器、元素选择器等等。例如: 代码如下:$(“li:last- child ”). css (“color”,”blue”) 以上代码能够将父元素下最后一个li 元素中的字体颜色设置为蓝色。注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是li，而是li的父元 <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/ css "> # nth -test div: nth - child (-n + 4).