css - CSS3 nth-of-type および first-child before

Question

nth-of-type(odd):before と first-child:before に問題があり、最初の "li" 要素の :before コンテンツを無効にする必要があります。 問題は、css が first-child:before. に反応しないことです。

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)一致するため、この場合、2 番目のルールが最初のルールを完全にオーバーライドします。

これを回避する最も簡単な方法は、最初のルールを下に移動することです。これは、両方のセレクターが同等に具体的であるためです(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、2 番目のルールで を使用しているため、実質的に疑似要素を無効にしている:beforeので、他に何も変更する必要はありません。

とはいえ、とにかく明示的にキャンセルしたい場合は、次のことができます。

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

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