2.7参数n的特殊用法 n的取值0,1,2,3,4,5,6...,所以2n+1命中的是第一、第三、第五、第七位 所以2n命中的是第二、第四、第六、第八位。 这是常见的奇数位与偶数位的选择,可以使用odd与even参数 另外一些常见的用法: 选择第一、第四、第七... n+4选择第四个之后的子元素 -n + 6选择前六个子...
4. :nth-last-of-type(n) 倒数第n个; 对应的 :nth-last-child(n) 5. :nth-of-type(An + B) n从0开始,A与B都是固定的整数,可以是负数,但计算结果小于1的都会被忽略, 同样适用 :nth-child :nth-of-type(2n) 匹配 2、4、6 其实相当于 even :nth-of-type(2n + 1) 匹配 1、3、5 其实相...
四、nth-of-type用法示例 1. 选择所有偶数位置的元素：```css li:nth-of-type(2n) { color: red...
:nth-of-type(n) { sRules } (匹配同类型中的第n个同级兄弟元素E。 ) 4、E:first-child { sRules } (匹配父元素的第一个子元素E。 ) 5、E:last-child...CSS3结构伪类选择器: 1、E:nth-child(n)实现奇偶: (li:nth-child(2n){color:#f00;} /* 偶数 */ li:nth-child(2n+1){color智能...
ulli:nth-of-type(2n){ background-color:#f0f0f0; } 综上所述,选择器的选择可以使用数字和函数,例如odd、even、n、n+1等等,形成规律性的样式。通过不断的尝试与运用,它们能够为我们的网页布局提供更为灵活丰富的选择。 要全面理解这两个选择器的概念,首先要对 CSS 中的基本选择器有一定了解。选择器是指...
其实.line:nth-of-type(2n+1) 是按照元素类型做个集合, 然后再根据不同的集合取符合奇数规则的显示。 这就解释了为何 p 和 div 都有显示。 而非揉在一起间隔显示。 tips: 注意 nth-of-type 的描述,相同兄弟节点的元素 .hello:nth-of-type(2n+1) ...
nth-child(2n-1) 或 nth-child(odd) 表示其父元素的第奇数个子元素 不同点: /这里选择的是第二个子元素,是p才会匹配生效/ p:nth-child(2) { background: skyblue; } /这里选择是第二个p元素,它会从上往下找,找到第二个p才会生效/ p:nth-of-type(2) { ...
nth-child(2n+1):匹配位置为奇数(即 1、3、5、7...)的元素。因为比较常用,比如表格的斑马线效果,所以我们可以用语义更好的关键字 odd 来替代 2n+1。需要特别注意的是,元素的索引是从 1 开始的,不是从 0 开始的。 nth-child(2n):匹配位置为偶数(即 2、4、6、8...)的元素。同 nth-child(even)。
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(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。 HTML代码: 我是一个Div元素 我是一个段落元素 我是一个Div元素 我是一个段落 我是一个Div元素 我是一个段落 我是一个Div元素 我是一个段落 我是一个Div元素 我是...