介绍一个关于CSS:nth-child选择器的新特性。 不知道大家有没有碰到过这样的问题或者需求,从一个特殊的、不可更改的HTML结构中选择出你想要的元素,比如 标题1标题2段落1段落1段落2段落2<!--想选中这个-->段落2段落3 请问,如何选择第2个.p2标签,如下 image.png 如果不借助 JS,好像并不是很容易?今天一起来...
DOCTYPEhtml>nth-child这是列表第1行这是列表第2行这是列表第3行这是列表第4行这是列表第5行这是列表第6行这是列表第7行这是列表第8行这是列表第9行这是列表第10行 开始实践CSS代码,为方便研究,我们现给一段基础CSS代码 代码语言:javascript 复制 ul.list{width:500px;margin:100px auto;}ul.list li{wi...
:nth-child(2)会选择Div 1,因为它是父元素的第二个子元素。 :nth-of-type(2)会选择Paragraph 2,因为它是父元素的第二个元素。 选择所有奇数子元素: :nth-child(odd)会选择Paragraph 1、Paragraph 2和Paragraph 3,因为它们分别是第一个、第三个和第五个子元素。 :nth-of-type(odd)会选择Paragraph 1和Pa...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧。 复制 :nth-child(2){color:red} 1. 2. 3. 选中第2个元素。 然后是nth-of-type。 复制 :nth-of...
class类选择器: 格式: 分组选择器: 格式: 基本选择器的权重: css组合选择器: 后代选择器: 格式: 样例: 子代选择器: 格式: 子代选择器和后代选择器比较: 相邻兄弟选择器: 格式: 普通兄弟选择器: 格式: nth-child()的浅显使用: 选择列表中下标为偶数的标签: ...
当“E:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。 代码展示: HTNL: div 1 div 2 div 3 div 4 div 5 div 6 div 7 div 8 CSS: .dome div{ border:1px solid orange;...
语法::nth-child(n) 说明::nth-child() 是CSS3的一个伪类选择器,匹配父元素中的第 n 个子元素,元素类型没有限制。 n可以是一个数字,一个关键字,或者一个公式。 下面用案例来说明各个常见的情况用法 原始效果demo <liv-for="item in listData">{{item.pname}}{{item.type}}{{item.LJTZJH}}{{item...
nth-last-child(3n)nth-last-child(3n):选择第 3、6、. . . 个元素,选择三的倍数。 举例:第3、6、 . . . 三的倍数行背景色设置为橙色,代码如下: 代码语言:javascript 复制 li:nth-child(3n){background:orange;} nth-last-child(3n+1)nth-last-child(3n+1):选择第 1、4、7 个元素,从第一个...
我给:nth-of-type(3)的元素设置了字体颜色,可以看到,第3个class='pp'的p元素和class='pp'的span元素的字体颜色都发生了改变,因为:nth-of-type是根据标签类别排序的,所以存在多个选择的情况 总结啦 虽然.pp:nth-child(3)和.pp:nth-of-type(3)这两种写法,都是先写了选择器,后排序选择,但是我觉得应该是...
first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) ...