:nth-last-of-type(n):选择指定元素的兄弟元素中第n个该元素,从最后一个兄弟元素的该元素计数 :nth-of-type(n)和:nth-last-of-type(n)像是:first-of-type和:last-of-type的拓展版,它可以选择指定元素的兄弟元素中,同为该元素的第n个: 例如: 即使div的兄弟元素的第一个是p元素,div:nth-of-type(1)...
:nth-of-type 计算公式:a * n的倍数 + b; (n是从0,1,2...开始) :nth-of-type(an + b):是基于相同的兄弟标签元素匹配 div p:nth-of-type(1){background-color:orange;} 这是h32 :nth-last-of-type :nth-last-of-type():是基于相同的兄弟标签元素从后往前匹配 div h5:nth-last-of-type(...
p:nth-child(2); p:nth-of-type(1); 这就明白了把。 p:nth-child(n)的n是取决于第n个位置必须出现的p元素,再能被选中 而 p:nth-of-type(n)是取决于父级下面的p元素,的第n个。
1.选择第二个 元素时: p:nth-of-type(2) {/* 设置样式 */background-color: green; } 2.选择所有奇数位置的 元素时,使用关键词 odd: p:nth-of-type(odd) {/* 设置样式 */background-color: green; } 3.选择每个循环(循环周期为 a)中第 b 个元素时,则使用公式 an+b: /* 选择位置为 3 ...
nth-of-type和nth-child的区别我这里就不说了,只说nth-of-type。 首先我们设定下面这样一个结构,然后通过下面四个例子真正理解nth-of-type 1.这是div 2.这是div.common 3.这是p.common 4.这是div.common 5.这是p.common 一、通过div标签选择第2个div div:...
//apps.bdimg.com/libs/todc-bootstrap/3.1.1-3.2.1/todc-bootstrap.min.css"> *{margin: 0; padding: 0;} table {margin:20px auto;} .uib-weeks { #eee; border: 2px solid #ddd;} .uib-day {padding: 2rem; } .uib-weeks .uib-day:nth-of-type(2) .btn-default {color: #f00; ...
二、举例说明 nth-of-type和nth-child的区别 1、给第一个div五个P标签,给第二个div五个H5标签,分别用nth-child(2)与nth-of-type(2),看看结果是不是一样的,都是第二个变色。 p:nth-child(2){color: red ;} h5:nth-of-type(2){color: blue;} 星期一...
nth-child代表第几个元素 nth-of-type代表这个类型是第几个元素 例: p:nth-of-type(1)：就算p不是第一个子元素，也可以取到，因为p在这个div中是第一个出现的p元素 nth-child就是第几个子元素了，就是按子元素个数算的
nth-of-type(n)与nth-child(n)中的n可以是数字、关键词或公式。 数字:也就是上面例子的使用,就不做赘述。 关键词:Odd 、even Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词 注意:第一个子元素的下标是 1 在这里,我们为奇数和偶数 p 元素指定两种不同的背景色: ...
首先:nth-child 和 nth-of-type的索引都是从1开始的 nth-child 和 nth-of-type有什么不同? 直接上例子,看代码注释就好 <!DOCTYPE html> demo /*ul下的第2个元素 且这个元素为li*/ .ul li:nth-child(2) { color: red; } /*ul下的第2个li*/ .ul li:nth-of-...