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以及链接7,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）＆lt; - 这将选择第7个孩子之后的所有孩子

.outer-container a：nth-child（-n + 3）＆lt; - 这将选择第4个孩子之前的所有孩子。

检查此链接。显示了定位不同子元素http://css-tricks.com/useful-nth-child-recipies/

的各种方法

选择器内部div之前和之后的CSS

2 个答案: