具有第n个子元素的伪选择器组合

时间:2018-12-05 21:12:18

标签: html css

我正在尝试使用2个组合的伪类( not nth-child )来定位子元素,以在之后返回元素的偶数子元素排除了 span

<div>Will have a left margin</div>
<div></div>
<p>Will have a left margin</p>
<p></p>
<span></span>
<div>Will have a left margin</div>
<div></div>

所以我尝试了:

#someItem >:not(span):nth-child(even) {
    margin-left: 8px;
}

但是我得到了(基本上 nth-child 伪类会忽略 not 选择器):

<div>Has a left margin</div>
<div></div>
<p>Has a left margin</p>
<p></p>
<span></span>
<div></div>
<div>Has a left margin</div>

因此,我考虑过使用这种方式(使用一个通用的同级选择器)来编写它,以使 nth-child 影响先前过滤的列表:

#someItem >:not(span) ~:nth-child(even) {
    margin-left: 8px;
}

但仍然不走运。

是否有某种方法可以使 nth-child 选择器在已删除 span 元素的元素列表上工作? (在纯CSS中)

0 个答案:

没有答案