Question

我想在所有<li>元素上放置一个顶部边框，其中类“foo”不是<li>元素与类“bar”的相邻兄弟。

是否有“没有相邻的兄弟[x]”SASS / CSS选择器？或者是通过两个规则实现此目的的唯一方法，一个是将顶部边框添加到所有<li class="foo">，另一个是将其从<li>旁边的<li class="bar">中删除？

Answer 1

当我说得不好时，你想要这个：

HTML

<ul>
    <li class="bar">Bar</li>
    <li class="foo">foo</li>
    <li class="foo">foo</li>
    <li class="foo">foo</li>
    <li class="foo">foo</li>
    <li class="bar">Bar</li>
    <li class="foo">foo</li>
    <li class="foo">foo</li>
    <li class="foo">foo</li>
    <li class="foo">foo</li>
</ul>

CSS：

li:not(.bar)+li.foo
{
    border-top: 1px solid blue;
}

选择不是<li class="foo">

的相邻兄弟的每个<li class="bar">的选择器

此选择器只有需要一个前导<li>的弱点。如果第一项不是<li class="bar">，则该项目将被省略。这可以像在这里看到的那样解决：

http://jsfiddle.net/gECc9/1/

li:not(.bar)+li.foo,
li.foo:first-child
{
    border-top: 1px solid blue;
}

P.S。如果要对列表中的项目进行分组，还可以使用定义列表<dl>或嵌套列表。这可以防止这些问题。

对于没有特定相邻兄弟的项目，是否有SASS / CSS选择器？

1 个答案: