0

テンプレートファイルへのアクセスが制限されたCMSプラットフォームで作業しており、疑似クラスを使用してレイアウトの一部を制御しようとしていますが、まだ運がありません。誰かがこの構造の何が悪いのか、そしてなぜ私の疑似クラスが無視されているのかを知ることができますか？

<div id="main">
    <div class="someRandomDiv"></div>
    <div class="block">
    stuff
    </div>
    <div class="block">
     more stuff
    </div>
</div>

そして私はこのようなことを試みています

#main .block {border: 1px solid blue}
#main .block:first-child {border: 1px solid red}

したがって、この例では、スタッフブロックの境界線が赤になり、さらに多くのスタッフに青が表示されると思いますが、すべて青です。

これについて助けてくれてありがとう。

4

1 に答える 1

3

無視されているわけではなく、一致するものがないだけです:)

少し直感に反していると思いますが、:first-child文字通り、親のタイプではなく、親の最初の子を意味するため、コードで一致するのは。だけです。:first-child<div class="someRandomDiv"></div>

のクラスを持ち、その親の最初の子である.block:first-child要素を言っているので、「クラスを持つ最初の要素」を言っているのではありません...それらは独立したセレクターであり、ここで重複していません。したがって、両方の条件に一致する要素がないため、一致するものはありません。block block

すべてのブラウザをサポートするわけではありませんが、:nth-child()またはjavascriptを使用して、たとえばjQueryでは次のようになります。

$("#main .block:first").css({ border: '1px solid red' });
于 2010-04-29T20:32:32.137 に答える