如何使用<code>nth-chid()</code>方法給出不同的內容，每一個TD表中的

Question

我掙扎給予不同的內容（圖標在我的情況），以每<td>。

如果我加入這個CSS規則，我看到每<td>一類圖標：

.help-block .css-context-explorer-orientation-widget td:before { 
    font-family: icons; 
    content: "\e04f"; 
    position: absolute; 
} 

在這個階段，我要覆蓋上面的規則，但我看不出有什麼變化，所有圖標是相同的。

.help-block .css-context-explorer-orientation-widget td:before:nth-child(1) { 
    font-family: icons; 
    content: "\e04e"!important; 
} 

如果我給的!important規則，不應該覆蓋上面的規則？

PS：如何改寫規則時，我會去第二排？

Answer 1

這裏的問題是不是與important。

您的選擇是錯誤的。應在選擇器的末尾使用:before。

.help-block .css-context-explorer-orientation-widget td:nth-child(1):before { 

首先選擇第一個子元素，然後使用before就可以了。

Answer 2

您需要在::before僞元素之前先使用僞類nth-child。

您的代碼具有Select the first before pseudo-element of the parent僞元素的邏輯是DOM的假貨，而不是一部分，所以他們使用的第n個孩子不計算。

下面的代碼使一個邏輯Select the before pseudo-element of td which is first child of the parent

.help-block .css-context-explorer-orientation-widget td:nth-child(1):before { 
    font-family: icons; 
    content: "\e04e"; 
} 

Answer 3

只是適用於：前第n個孩子：像以前一樣

.help-block .css-context-explorer-orientation-widget td:nth-child(1):before { 
    font-family: icons; 
    content: "\e04e"; 
}