Question

我有<div>个加载项，所有类名都为“a”。

偶尔，在这些div之间混合我有一个类名为“b”（这些'b'元素基本上是我列表中的类别标题）。

<div class='a'>item 1</div>
<div class='a'>item 2</div>
<div class='a'>item 3</div>

<div class='b'>category header</div>

<div class='a'>item 4</div>
<div class='a'>item 5</div>

<div class='b'>another category header</div>

<div class='a'>item 6</div>
<div class='a'>item 7</div>

班级“a”有一个border-bottom:1px dotted black;

但是，如果其中一个带有'a'类的div后面紧跟着一个'b'（类别标题）的div，我不希望类'a'有点缀的底边，所以我想要将其设置为border:0;

因此，在上面的示例中，我想从项目3和5中删除虚线的border-bottom样式属性（因为它们紧跟着一个类别div）。

什么css选择器可以实现这个目标？

Answer 1

如何转换事物并使用border-top代替？以下内容将从标记中删除项目3和5中的伪底边框。

div:last-child {
    border-bottom:1px dotted black;
}

div {
    border-top:1px dotted black;
}

div:first-child, div.a + div.b {
    border:none;
}

Demo

Answer 2

我没有意识到我无法进一步选择DOM。我的坏。

所以，我基本上把我的逻辑略微翻了一下，所以'a'有一个border-TOP（而不是BOTTOM），除非它直接跟在一个带有'b'类的div之后。这给了我理想的结果。

Answer 3

据我所知，这对CSS来说是不可能的。

您可以使用jQuery执行以下操作，但

$('.b').prev('.a').css('border', 'none');

示例：http://jsfiddle.net/jasongennaro/XUhax/

当在类名B的另一个元素旁边时，按类名A选择元素

3 个答案: