CSS第n个孩子元素写法

html-css018

CSS第n个孩子元素写法,第1张

在开发中,需要这样一个需求,需要找到第n个孩子元素。一时想不起来应该怎么写,经过查阅后得知。

因此记录一下,以免日后再忘记。

:nth-child 是CSS伪类,它首先找到所有当前元素的兄弟元素,然后按照位置 先后顺序从1开始排序 ,选择的结果为CSS伪类:nth-chilid括号中表达式(an+b)匹配到的元素集合。(n=0,1,2,3)。

tr:nth-child(2n+1)

表示表格中的奇数行

tr:nth-child(odd)

表示表格汇总的奇数行

tr:nth-child(2n)

表示表格中的偶数行

tr:nth-child(even)

表示表格中的偶数行

span:nth-child(0n+1)

表示子元素中第一个且为span的元素,与:first-child选择器的作用相同

span:nth-child(-n+3)

匹配前三个子元素中的span元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

代码如下:

li:nth-child(3n)

{

background:#ff0000

}

CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。