CSS前，裏面的div

我想以後和選擇之前，使用某些樣式應用到一個div的兒童選擇後，我的代碼如下：CSS前，裏面的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 
}

我想樣式應用到鏈接1， link2和link3以及鏈接7,8和9.但選擇器不工作。

來源

2014-10-30 Eddard Stark

我想你誤解了'：before'和'：after'的工作方式，你應該使用'：nth-child（）'或'：nth-of-鍵入（）'代替。 – 2014-10-30 12:12:03

*之前的*和*之後的含義*對於您的case而言不正確。它表示渲染之前和渲染之後的class.not之前和之後的元素 – yugi 2014-10-30 12:14:28

你不需要

::之前

或

::後，在這種情況下

標籤，只需調用元素像這樣：

.outer容器一個{}

。中旬分壓器一個{}

。去年分壓器一個{}

來源

2014-10-30 12:17:32 user3164891

您可能需要檢查選擇器; '.mid-divider'和'.last-divider'在示例中不包含任何'a'標籤，OP希望只對前3個和後3個'a'標籤進行樣式化，而不是中間標籤。 – 2014-10-30 12:21:47

@隱藏的霍布斯你是對的，我誤解了這個問題 – user3164891 2014-10-30 12:24:59

沒問題，你可以隨時編輯你的答案來修復你的錯誤;） – 2014-10-30 12:32:43

嘗試使用此

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

。外部容器a：第n個孩子（n + 7）< - 此選擇第7個孩子後的所有孩子

。外部容器a：第n個孩子（-n + 3）< - 選擇第4個孩子之前的所有孩子。

檢查此鏈接。顯示了多種方法來定位不同的子元素http://css-tricks.com/useful-nth-child-recipies/

來源

2014-10-30 13:50:38

我還應該提到，nth-child是一個CSS3摘錄，：nth-type類型更好與傳統瀏覽器兼容 – 2014-10-30 13:52:55

CSS前，裏面的div

回答

相關問題