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/