为了账号安全,请及时绑定邮箱和手机立即绑定

用p:nth-child(n)的时候就限定子元素是p了,这样和p:nth-of-type(n)还有差别吗?

用p:nth-child(n)的时候就限定子元素是p了,这样和p:nth-of-type(n)还有差别吗?

yy_0017 2016-04-21 15:01:06
查看完整描述

1 回答

已采纳
?
qq_青枣工作室_0

TA贡献446条经验 获得超754个赞

有差别啊。

p:nth-child(n) 是第n个子元素(但是第n个子元素不一定能找到p标签)

p:nth-of-type(n) 是第n个p子元素(只找里面的p标签,而且是找到后的第n个p标签)

例如:

<!DOCTYPE HTML>
<style>
    p:nth-child(2) {
        background-color:red;
    }
    p:nth-of-type(2) {
        background-color:green;
    }
</style>
<div>
    <span>span1</span>
    <p>p1</p>
    <p>p2</p>
</div>

这里,div下的子元素既有span,又有p。第2个子元素,跟第2个子p元素,是不同的意思。

//img1.sycdn.imooc.com//571885b50001f7c502390110.jpg


类似地,你想想,如果是p:nth-child(1),就找不到p标签了。而 p:nth-of-type(1) 是能找到第一个p标签的。


查看完整回答
2 反对 回复 2016-04-21
  • 1 回答
  • 0 关注
  • 1646 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信