div中选择器前后的CSS

Question

我正在尝试使用选择器之后和之前将某些样式应用于div的子代，我的代码如下：

<div class="outer-container">
    <a href="#" class="links">Link 1</a>
    <a href="#" class="links">Link 2</a>
    <a href="#" class="links">Link 3</a>
    <span class="mid-divider">Some Text</span>
    <a href="#" class="links">Link 4</a>
    <a href="#" class="links">Link 5</a>
    <a href="#" class="links">Link 6</a>
    <span class="last-divider">Some Text</span>
    <a href="#" class="links">Link 7</a>
    <a href="#" class="links">Link 8</a>
    <a href="#" class="links">Link 9</a>
</div>

.outer-container .mid-divider::before{
    //some styles
}
.outer-container .mid-divider::after{
    //some styles
}

我想将样式应用于link1，link2和link3以及link7,8和9。但是选择器不起作用。

Answer 1

您不需要

：：之前

要么

::之后

在这种情况下，只需调用以下元素：

.outer-container a {}

.mid-divider a {}

.last-divider a {}

Answer 2

尝试使用这个

.outer-container a:nth-child(n+7), .outer-container a:nth-child(-n+3) { }

.outer-container a：nth-​​child（n + 7）<-选择第7个孩子之后的所有孩子

.outer-container a：nth-​​child（-n + 3）<-选择第四个孩子之前的所有孩子。

检查此链接。 显示了针对不同子元素的多种方法http://css-tricks.com/useful-nth-child-recipies/