在开发中，需要这样一个需求，需要找到第n个孩子元素。一时想不起来应该怎么写，经过查阅后得知。
因此记录一下，以免日后再忘记。
:nth-child 是CSS伪类，它首先找到所有当前元素的兄弟元素，然后按照位置 先后顺序从1开始排序 ，选择的结果为CSS伪类:nth-chilid括号中表达式（an+b）匹配到的元素集合。（n=0,1,2,3）。
tr:nth-child(2n+1)
表示表格中的奇数行
tr:nth-child(odd)
表示表格汇总的奇数行
tr:nth-child(2n)
表示表格中的偶数行
tr:nth-child(even)
表示表格中的偶数行
span:nth-child(0n+1)
表示子元素中第一个且为span的元素，与:first-child选择器的作用相同
span:nth-child(-n+3)
匹配前三个子元素中的span元素
>
可以使用css3的奇偶选择器，如：
tr:nth-child(odd){background-color:#FFE4C4;}tr:nth-child(even){background-color:#F0F0F0;}
li:nth-child(odd)是设置奇数行的背景色，li:nth-child(even)是设置偶数行的。但是css3不兼容IE9以下的浏览器，如果需要考虑到兼容问题的话，可以使用jq设置，如：
$("table tr:nth-child(even)")css("background-color","#FFE4C4"); //设置偶数行的背景色$("table tr:nth-child(odd)")css("background-color","#F0F0F0"); //设置奇数行的背景色
一、首先是C3属性选择器
1 每一个标签都有自己的属性，是吧？要给它一个样式，就可以通过它的属性来找到它。
2 属性选择器的权重是10
3 都有哪些？
- 标签名[属性名]
- 标签
- 标签名[type="属性名"]
- ^= 以icon开始的选出来
- $= 以icon结尾的选出来
- = 代表任意位置，包含该属性的就要选出来
例子
二、结构伪类选择器
语法：
nth-child(n) 释义：
- 想要选哪个n就在那个里面输入数字几就可以了
- 这里的n 可以有特殊数值偶数even 奇数odd 有利于做隔行变色
- n可以是公式
- -n+5选出前5个。
例子
三、ntf-of-type 选择器
先上总结：
- nth-child(n) 选择父元素里面的第一个 n个孩子
- of-type 选择指定类型的元素
例子
四、伪类选择器
方式一 ::before ::after
方式二 :before :after
总结：伪元素前面可以是一个冒号，也可以是两个冒号，不影响结果
例子
HTML CODE:1<div class=box>2 <span>First span</span>3 <p class=ft>First p</p>4 <div>First div<strong class=ft>Strong text</strong></div>5 <p class=ft>Second p</p>6 <div class=ft>Second div <span>Second span</span><span>Third span</span></div>7</div>
结构性伪类选择器的冒号前边可以跟一个其他选择器做为限定；带括号的选择器，里面一定要有参数；匹配子元素，同时也会匹配孙子元素，因为子元素是孙子元素的父元素；
下面的 !lte8是指IE8一下浏览器不支持，包括IE8也不支持
:first-of-type，选择相对父元素里同类型子元素中的第一个，!lte8box :first-of-type {color: #f00}//匹配234以及4里面的strong和6里面的第一个span，因为这个span是6里的第一个span子元素box ft:first-of-type {color: #ff0}//匹配3和4里面的strong，因为3是box里面的第一个p且class=”ft”，而4里只有一个strong且class=”ft”，而5和6虽然class=”ft”但是他们相对于box的同类型中不是第一个出现的；
:last-of-type，选择相对父元素里同类型子元素中的最后一个，!lte8box :last-of-type {color: #f00}//匹配256以及4里的strong和6里的最后一个span
:only-of-type，选择相对父元素里同类型子元素中只有一个的元素，!lte8box :only-of-type {color: #f00}//匹配2以及4里的strong，类为box里同类型元素只有一个的只有spanbox ft:only-of-type {color: #f00} //只匹配4里的strong:only-child，选择的元素相对于其父元素是唯一的子元素，!lte8box :only-child {color: #f00}//只匹配4里的strong
:nth-child(n)，选择其父元素的第n个子元素或多个子元素，索引从1开始，当n用于表达式时索引从0开始!lte8box :nth-child(3) {color: #f00}//匹配第三个子元素即这里的4box :nth-child(odd) {color: #f00} 等价于 box :nth-child(2n + 1) {color: #f00}//匹配奇数即这里的246以及4里的strong和6里的第一个spanbox :nth-child(even) {color: #f00} 等价于 box :nth-child(2n + 2) {color: #f00}和box :nth-child(2n)//匹配偶数即这里的35以及6里的第二个spanbox :nth-child(n + 1) {color: #f00}//匹配 n + 1开始的所有子元素即box里所有的子元素以及子孙元素，因为这里n是从1开始的即：n = 0 ----> n + 1 = 0 + 1 = 1，即这里的2n = 1 ----> n + 1 = 1 + 1 = 2，即这里的3 n = 4 ----> n + 1 = 4 + 1 = 5，即这里的6
:nth-last-child(n)，跟:nth-child(n)使用类似，只是索引是从最后开始往前数，!lte8box :nth-last-child(3) {color: #f00}//匹配倒数第三个子元素即这里的4
:nth-of-type(n)，选择父元素的第n个或多个同类型的子元素，!lte8box :nth-of-type(2) {color: #f00}//匹配5和6以及6里面的第二个span
:nth-last-of-child(n)，同上，只是从最后开始往前数，!lte8box :nth-last-of-child(2) {color: #f00}//匹配3和4以及6里面的第一个span:first-child，选择父元素里的第一个子元素，!ie6box :first-child {color: #f00}//匹配2和4里的strong以及6里的第一个span
:last-child，选择父元素里的最后一个子元素，!lte8box :last-child {color: #f00}//匹配6和6里的最后一个span以及4里的strong
:root，选择文档的根元素，在HTML中就是指<html>标签，!lte8:empty，选择没有任何内容的元素，那怕是有一个空格也不行，!lte8table td:empty {background-color: #ffc}//匹配表格里没有内容的td:target，选择当前活动的元素，指锚点点击后跳转到的那一个元素，!lte8:not(selector)，选择排除selector以外的其他所有元素，!lte8box :not(div) {background-color: #ffc}//选择box里除div以外的所有后代元素，如果div里有其他非div元素，也会选择上，如上的HTML CODE就会选择上div里面的span和strong
这是我的学习笔记，你也可以拿去用
1 元素选择器：比如p{xxxx}，选择文档中所有的p元素；
2 类选择器：比如center_bar{xxxx}，选择文档中使用了类center_bar的元素；
3 id选择器：比如button1{xxxx}，选择文档中使用了button1的元素；
4 或选择器：用逗号连接多个选择器；
5 与选择器：多个选择器紧挨在一起；
6 后代选择器：用空格连接多个选择器；
7 子代选择器：用大于号连接多个选择器，它其实是后代选择器的特殊情况；
8 属性选择器：
(1) 比如p[id]，选择标签上有属性“id”的p元素；
(2) 比如p[id="button1"]，选择标签上有属性“id”并且id的值为“button1”的p元素；
(3) 比如p[id^=”b”]，选择标签上有属性“id”并且id的值以“b”开头的p元素；
(4) 比如p[id$=”b”]，选择标签上有属性“id”并且id的值以“b”结尾的p元素；
(5) 比如p[id=”b”]，选择标签上有属性“id”并且id的值包含“b”的p元素；
9 p:first-child：既是p元素，也是某元素的第一个孩子；
10 p:last-child：既是p元素，也是某元素的最后一个孩子；
11 p:nth-child(3)：既是p元素，也是某元素的第三个孩子；
12 p:nth-child(odd)：既是p元素，也是某元素的第奇数个孩子；
13 伪类选择器都是某种状态，比如active、link、hover，使用“:”；
14 伪元素选择器，确实有某些实体的东西，比如第一行文字、第一个文字、被选中的文字，使用“::”
15 只有多个选择器选中了同一个元素的同一个属性，才会出现优先级的问题；
16 如果两个选择器优先级相同，那么写在后面的选择器生效；
17 选择器优先级的排列：
(1) !important
(2) 内联样式
(3) id选择器
(4) 类和伪类选择器
(5) 元素和伪元素选择器
(6) 选择器
(7) 继承样式
以上就是关于CSS第n个孩子元素写法全部的内容，包括:CSS第n个孩子元素写法、css中设置html的外部样式表的奇偶行交替色类似、CSS3选择器真有特殊含义等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）