Question

如果我只想在链接后插入一个伪元素，只有在链接后面跟着另一个元素说ul。我怎么能这样做？

示例：

<ul>
    <li>
        <a href="#">blah<!-- insert -> here with CSS --></a>
        <ul>
            <li>More stuff</li>
        </ul>
    </li>
    <li>
        <a href="#">blah 2<!--Do nothing here--></a>
    </li>
</ul>

CSS我希望可能发生：

ul li a:after if(next:ul) {
   content:"->";
}

我不是想尝试使用JavaScript / jQuery。我意识到如果条件不是css的区别。有没有办法做到这一点？

Answer 1

一般情况下，无法根据下一个兄弟选择元素。

在您的特定情况下，您可以使用ul li a:not(:last-child)::after，因为您的锚点未被<ul>元素跟随也是最后一个子元素。

Answer 2

您可以简单地使用：

ul + li a:after {  /* ...css code... */  }

基本上这意味着：

匹配a元素中包含的li元素，该元素后面紧跟ul元素。

CSS中的+运算符称为adjacent sibling combinator。

Answer 3

如果要过滤元素hierarchy/list中的任何元素，可以使用以下方法。

ul li a:not(:nth-last-child(N))::after

此处N是从结尾开始遍历的任何正整数； 1表示最后一个元素2表示倒数第二，依此类推。代替ul li在这里使用任何选择器

有关更多信息，请访问nth-last-child()。

我怎么能使用伪元素：after：在有条件之前

3 个答案: