css选择器写法好像有点问题

Question

.weui-cell__bd>p>span:nth-child(2){
        margin: 0 1.3rem;    
}

我想选.weui-cell__bd下的p 下的三个span元素里的第二个span,这样写有什么问题吗？选不中

Answer 1

用nth-of-type
看下这篇文章你就清楚了CSS3选择器:nth-child和:nth-of-type之间的差异

Answer 2

span是行内元素，即使选中加margin看不出效果，可以换个color试试

Answer 3

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
提示：请参阅 :nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。

具体代码可查看：http://www.w3school.com.cn/ti...

Answer 4

写法没问题，是不是选中了但是优先级低并没有生效？可以打开F12看一下

Answer 5

你的写法是选择所有 .weui-cell__bd 下的所有 p 下的 第二个 span(如果第二个是span元素的话)

// 选择.parent下第二个元素，如果是.weui-cell__bd的话
.parent .weui-cell__bd:nth-child(2) > p > span{
  color: red;
}

// 选择.parent下第二个.weui-cell__bd
.parent .weui-cell__bd:nth-of-type(2) > p > span{
  color: red;
}

另： 请大神帮忙回答以下这个问题https://segmentfault.com/q/10...