css - CSS3 nth-of-type 和 first-child before

Question

我对第 nth-of-type(odd):before 和 first-child:before 有疑问，我需要禁用 :before 第一个“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)都将匹配相同的元素，因此在这种情况下，您的第二个规则完全覆盖了第一个。

解决这个问题的最简单方法是将您的第一条规则移到下面，因为您的两个选择器都是同样特定的（1 个元素，1 个伪类，1 个伪元素）：

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

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

请注意，因为两个选择器都匹配同一个元素，所以margin样式仍然适用于第一个孩子的:before. 但是由于您content:none在第二条规则中使用，因此您实际上禁用了:before伪元素，因此您不需要更改任何其他内容。

也就是说，如果您想明确取消它，您可以：

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

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