li:nth-of-type(2n) { color: red; } ```此规则会将所有偶数位置的元素的文字颜色设置为红色。2...
} :nth-of-type :nth-child 说明:p:nth-of-type(2n+0)为p元素的父元素的子p元素中,第0、2、4个p元素匹配 p:nth-child(2n+0)为p元素的子元素中,第0、2、4个子元素且是p元素才匹配
在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。 通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。 HTML代码: 我是一个Div元素 我是一个段落元素 我是一个Div元素 我是...
2.7参数n的特殊用法 n的取值0,1,2,3,4,5,6...,所以2n+1命中的是第一、第三、第五、第七位 所以2n命中的是第二、第四、第六、第八位。 这是常见的奇数位与偶数位的选择,可以使用odd与even参数 另外一些常见的用法: 选择第一、第四、第七... n+4选择第四个之后的子元素 -n + 6选择前六个子...
nth-of-type是CSS中的一个伪类选择器,用于选取指定类型的元素中的特定位置的元素。 nth-of-type(n)中的n表示一个公式或者一个整数,表示选取某一类型元素中的第n个元素。可以使用不同的表达式来选择不同的位置,如n、2n、2n+1等。 在对齐图像方面,nth-of-type可以用于选取特定位置的图像元素,并对其进行样式调...
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;} ...
其实.line:nth-of-type(2n+1) 是按照元素类型做个集合, 然后再根据不同的集合取符合奇数规则的显示。 这就解释了为何 p 和 div 都有显示。 而非揉在一起间隔显示。 tips: 注意 nth-of-type 的描述,相同兄弟节点的元素 .hello:nth-of-type(2n+1) ...
#a2div:nth-of-type(2n){background:#000000;color:#fff;} 看完了这篇文章,相信你对“css中选择器nth-child()和nth-of-type()怎么用”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
匹配标签选择模式,比如说代码div:nth-of-type(2n),不考虑其他的标签, 先把同级div排列一下,然后2的倍数的时候选择他。 p1div1p2div2div3p3div4div5div6#a2div:nth-of-type(2n){background:#000000;color:#fff;} 截图如下: 四、一般使用方法 1、:nth-child(x); 选择第x的元素 代码: p1p2p3p4p5...
ulli:nth-of-type(2n){ background-color:#f0f0f0; } 综上所述,选择器的选择可以使用数字和函数,例如odd、even、n、n+1等等,形成规律性的样式。通过不断的尝试与运用,它们能够为我们的网页布局提供更为灵活丰富的选择。 要全面理解这两个选择器的概念,首先要对 CSS 中的基本选择器有一定了解。选择器是指...