CSS3第n個類型和第一個孩子之前

Question

我有一個類型（奇數）的問題：之前和第一個孩子：在 之前我需要禁用：在第一個「li」元素之前的內容。 問題是，CSS不反應的第一子：前..

PS我使用LESS

所以，有一個代碼：

li { 
    &:first-child { 
     &:before { 
      content:none; 
     } 
    } 

    &:nth-of-type(odd) { 
     &:before { 
      content:'\b7'; 
      margin:0 8px 0 5px; 
     } 
    } 
} 

Answer 1

li:first-child和li:nth-of-type(odd)都將匹配相同的元素，所以在這種情況下，您的第二條規則完全覆蓋第一條。

解決這個問題的最簡單的方法是，將下方移動你的第一條規則，因爲both of your selectors are equally specific（1元，1僞類，1僞元素）：

li { 
    &:nth-of-type(odd) { 
     &:before { 
      content:'\b7'; 
      margin:0 8px 0 5px; 
     } 
    } 

    &:first-child { 
     &:before { 
      content:none; 
     } 
    } 
} 

注意，因爲這兩種選擇都匹配相同元素，margin樣式仍適用於第一個孩子的:before。但由於您在第二條規則you're effectively disabling the :before pseudo-element中使用了content:none，因此您不需要更改其他任何內容。

這就是說，如果你想取消它明確無論如何，你可以：

li { 
    &:nth-of-type(odd) { 
     &:before { 
      content:'\b7'; 
      margin:0 8px 0 5px; 
     } 
    } 

    &:first-child { 
     &:before { 
      content:none; 
      margin:0; 
     } 
    } 
}