5

私は次のようなhtmlセットアップを持っています:

<div class = "myClass">

     <div>
         <a>Content</a>
         <p><a>Content</a></p>  
     </div>


     <p><a>Content to CHANGE!</a></p>
     <p>Content</p>

</div>

margin-top「変更するコンテンツ」というラベルの付いたものに10pxを追加したいだけです。これ<p>はclass="myClass"I beleive の直接の子であり、<p>;である最初のものです。

ただし、この CSS スタイルは機能しません。

.myClass p:nth-child(1) {
    margin-top: 10px;
}

また

.myClass > p:nth-child(1) {
    margin-top: 10px;
}

誰でも理由がわかりますか？

4

1 に答える 1

7

pは の最初の子ではないためです.myClass。<div>です。使用する：

.myClass p:first-of-type

あなたも使いたいかもしれません

.myClass > p:first-of-type

子を明示的に選択します。

于 2013-08-01T16:58:50.583 に答える