小伙伴提的问题让我重新认识了nth-child
Demo预览：
https://sunzsh.github.io/html-demos/nth-child.html
代码：
https://github.com/sunzsh/st-html-demo/blob/master/nth-child.html
这个问题
今天让我重新认识了这个nth-child的哈
怎么回事呢
这小伙伴发来了一段代码啊
他说MND上说
nth-child是找所有当前元素的兄弟元素
然后呢他按照这个HTM结构呢
打印出来的:nth-child(2)是null
我们先来看一下啊
我们把这HTML
先复制过来
刚才我已经把CSS拿过来了
然后呢body过来格式化一下
注意它这里边有一个p标签的嵌套
大家看
这个p标签写了几个字呢
又嵌套了另一个p标签
这块我们先不要这么做
先把它放回来
一会再说为什么哈
好我们来看一下效果
大家看都是这样的
（但）他的意思是想把第二个变成红色（背景）
但是呢不起作用
我就想
是不是这个DIV影响的
可能他取到了这个p标签
这个p标签呢他就没有第二个元素
所以呢我就试了一下
我在这加了一个第二个元素
大家看 这样就可以了
然后呢我就跟他说
我说你看
你这个p标签
应该是取到了这个Div里的这个p
所以呢他又没有第二个
所以这也不生效
但是呢他说也不对
他说你看啊按照那么说我把这改成
按说他也没有第三个标签（兄弟）对吧
为什么页面上这个会变红
也就说他找到了这个
这就很奇怪
那到底为什么呢
我在这个MDN的英文版的文档里
找到这样一句话
他说在这个语法里啊
这个子元素的数量
包含了任何类型的元素
也就是说
如果 我想取这个p标签的兄弟元素
他在计算第几个的时候
h1、 div 也参与计算
但是呢只有当这个子元素的位置啊
它匹配了这个选择器的其他部分
它才会真正的
取到这个元素
也就说
h1、div虽然参与了数量但是呢
你真正取比如说h1是第一个
我把它改成第一个
但是h1又没有匹配到这一部分
所以呢它取到是个空
它就找不到这个呢
我们可以试一下哈
我们把它改回来
然后呢把它复制一下
我们在控制台里边用document.querySelector然后把它拿过来
我们先取第三个吧
看看它取到的是这个
但是呢如果我们在这取第二个
大家看 取到的就是空
因为第二个是这个div了
div没有匹配到这个
所以呢我们拿到是个空
那我们现在取第3个
取到的是这个p对吧
如果我们把第三个改一下，改成span
我们再来看一下
大概也是空了
我们再取第四个呢
它就是第二个段落了
但是还有一个好玩的地方就是
如果我这写成1，大家看
它是这个
为什么不是这个“空”呢
因为第一个不是h1吗
h1又不参与
它为什么会取到这呢
原因是在这个p标签来说
它在这个div里也属于第一个
所以呢他两个都满足
p:nth-child(1)最终会取到这个
如果他也是个p标签
然后呢 他也是1 这时候他俩都会满足
页面上就会有两个红色啊 大家看
那这时候我们再回到最初的问题
我们来看为什么
它这个
我加了一个就可以呢
为什么这样就可以呢
原因就是
这个相对于这个p标签来说
它在这个div里就是第二个
然后相对于这些p标签来说呢
它们的兄弟元素第二个是个div
所以它没有满足
那有同学问我把它改成p标签
相对来说这样是不是就满足了呢
我们来看下效果
大家看 不行
为什么呢
我们再来看一下
他最终生成的这个HTM结构
哈我们写的嵌套没有了
变成了一个空（p标签）
然后呢
两个p标签
最后又来一个空的p标签
为什么会这样呢
我在W3C的标准里找到这样一句话
他说p标签是一个段落的意思
它不能包含块元素（包括它自己）
（因为它自己也是个块元素）
所以我们这样写的话
最终生成的就是这样
这也是一个p就是两个p了
所以这样写的话
最终看到的效果呢
我们来看它取第二个
第二个是把它变成了红色
但是你这里边又没有文字
所以在页面上呢
是看不出效果的
大家看我们试着
强制把这里边
加一点文字
test大家看它就变成红色的了
那说到了最后
我们有没有一个其他的方法
可以解决这个问题呢
我们可以这样
我们在这呢
我们把这再恢复一下哈
现在是没有效果的
对吧这是原题那
我们可以怎么解决呢
我们把这改成
nth-of-type
用这个来选择
这样的话呢
它就会限制它同一级别相同的元素
我们再来试一下
大家看对于这个p来说
它相同的没有第二个元素
但是对于外边这个p来说
第二个p就是第二个段落
所以第二个段落变成红色
那我们给它
再加一个中间隔一个span标签
然后呢这加一个
我们希望这个横线的变成红色对吧
看看这两个都变成红色了
最后更新于