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; 
     } 
    } 
}