一.子元素的伪类 1):first-child 可以选中第一个子元素 2):last-child 可以选中最后一个子元素 3):nth-child 可以选中任意一个子元素 该选择器可以指定一个参数,指定要选中第几个元素 even 表示偶数位置的子元素 odd 表示奇数位置的子元素 4) :first-of-type :last-of-type :nth-of-type 和:first-chil...
1 首先打开编辑器新建一个HMTL文件 2 输入基础代码（小编使用ul标签做为演示）3 编写CSS选择【基数行】并添加样式核心代码：.list > li:nth-child(odd){ background: blue; font-size: 18px; color: #fff;} 4 编写CSS选择【偶数行】并添加样式核心代码：.list > li:nth-child(even){ background: golde...
4 然后开始对第一个li设置背景颜色以及字体颜色，ul li:nth-child(1){background-color:blue;color:white;}如图所示 5 第一个设置完成后，开始对第二个方块进行设置，第二个方块就是:nth-child(2){};代码如下ul li:nth-child(2){background-color:aqua;color:red;}，浏览器中查看效果，如图所示 6 剩下...
:nth-child :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 语法element:nth-child(an + b) { /*规则*/ }值值描述 :nth-child(2n+1) 规定奇数行。 nth-child(odd) 规定奇数行。 nth-child(2n) 规定偶数行。 nth-child(even) 规定偶数行。 :nth-child(0n+1) 规定子...
:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同 点此查看实例展示 .demo01 li:nth-child(n+4){background:#090} :nth-child(-n+4)选取小于等于4标签 点此查看实例展示 .demo01 li:nth-child(-n+4){background:#090} :nth-child(2n)选取偶数标签,2n也可以是even ...
/* ul li:nth-child(even) { background-color: pink; } ul li:nth-child(odd) { background-color: hotpink; } */ /* n 是公式 但是 n 从0开始计算 */ /* ul li:nth-child(n) { background-color: pink; } */ /* 2n 偶数 类似于 even */ ...
li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/第五种:奇偶匹配:nth-child(odd) 与 :nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。同时这个伪...
nth-child()详解如下: (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n ...
* :first-child * 可以选中第一个子元素 * :last-child * 可以选中最后一个子元素 * :nth-child(num) * 可以选中任意位置的子元素; * 如果不写num的值则默认为1,效果和":first-child"伪类相同了; * 如果num的值为"even",则表示偶数位置子元素 ...
table.dataintable tr:nth-child(odd) { background-color:#F5F5F5; } table.dataintable tr:nth-child(even) { background-color:#fff; } </style> </head> <body> <table class="dataintable"> <tr> <th>值</th> <th>描述</th>