nth-child是从父元素下不分类型统一排序,先选中第n个子元素,再看看是不是对应的类(或标签); nth-of-type从父元素下先按照类名(或标签)分别排序,再选择每一排序中的第n个子元素。
.line:nth-of-type(2n+1) 2n+1 是取符合条件的奇数标签(我试过 2n-1 也结果一致, 如果不对请 issue) 和上面不同, 标签 p 换成了样式选择器.line , 那哪些符合条件? .line:nth-of-type(2n+1) .wrap-a .line:nth-of-type(2n + 1) { font-size: 16px; font-weight: bold; color: red;...
四、nth-of-type用法示例 1. 选择所有偶数位置的元素：```css li:nth-of-type(2n) { color: red...
:nth-of-type :nth-child 说明:.type:nth-child(1)匹配的是type的父元素的子元素中第一个子元素且class是type的h1元素,.type:nth-of-type(1)匹配的是type的父元素的子元素中h1和p元素的第一个class是type的元素,即0和1。 总结: classA:nth-of-type(n) 匹配的是父元素的子元素中,每种类型的元素节点...
6 tbody tr:nth-of-type(2n){ background-color: red;}tbody tr:nth-of-type(2n+1){background-color: green;} 你也这样来做，选择 5-10 的子元素。table tr:nth-child(n+5):nth-child(-n+10) { background-color: red;} ...
nth-of-type是CSS中的一个伪类选择器,用于选取指定类型的元素中的特定位置的元素。 nth-of-type(n)中的n表示一个公式或者一个整数,表示选取某一类型元素中的第n个元素。可以使用不同的表达式来选择不同的位置,如n、2n、2n+1等。 在对齐图像方面,nth-of-type可以用于选取特定位置的图像元素,并对其进行样式调...
而nth-child和nth-of-type实际上属于特殊的伪类选择器。它们的使用可以带来高度的灵活性与动态效果,提升用户体验。nth-child和nth-of-type的精髓在于其灵活的参数设定,允许用户以数学表达式的形式进行选择。比如,3n+1会选择所有索引为 3 的倍数加上 1 的元素。
在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。 通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。 HTML代码:
p:nth-of-type(2n-1){background:#f00;} p:nth-of-type(2n){background:#0f0;} 第1个段落。 第2个段落。 第3个段落。 第4个段落。 多行变色 p:nth-of-type(3n){background:#00f;} p:nth-of-type(3n-1){background:#f00;} p:nth-of-type...
:first-of-type :focus :hover :indeterminate :lang :last-child :last-of-type :link :not :nth-child :nth-last-child :nth-last-of-type :nth-of-type :only-child :only-of-type :root :target :visited 伪元素 按名称列出的属性 按类别列出的属性 ...