0 
<body>
    <div>
        <p>First</p>
        <div>
            <p>Second</p>
            <div>
                <p>Third</p>
                <div>
                    <p>Fourth</p>
                    <p>Fifth</p>
                </div>
            </div>
        </div>
    </div>
</body>

css を使用して、最も内側の div の段落タグの色を変更したいと考えています。

例: 4 番目と 5 番目は赤、1 番目は緑、2 番目と 3 番目は青

私が使った

div div div p
{
color:red;
}

しかし、別の外側の div が再び追加された場合は、次のように書き直す必要があります。

div div div div p { color: red};

最も内側のdivを選択し、段落要素を選択して色を変更する他の方法はありますか?

JSフィドル

http://jsfiddle.net/FGQHh/

4

5 に答える 5

2

CLASS と IDについて紹介します。これが、ページ内の同じ要素を区別する方法です。

IDを使用すると、コードは次のようになります

例 1 (ID 付き)

例 2 (クラスあり)

HTML

<div id="green">
    <p> First </p>
    <div id="blue">
        <p> Second </p>
        <div>
            <p> Third </p>
            <div id="red">
                <p> Fourth </p>
                <p> Fifth </p>
            </div>
        </div>
    </div>
</div>

CSS

#red
{
    color:red;
}
#blue
{
    color:blue;
}
#green
{
    color:green;
}
于 2013-08-29T04:29:01.590 に答える
1

クラスを割り当てませんか？

<div class="test">
<p> Fourth </p>
<p> Fifth </p>
</div>

.test p{
color:red;
}
于 2013-08-29T04:24:54.140 に答える
0

div の最も内側の div の子にのみ css を追加しようとしている場合は、次のコードを使用できます。

   div:not(div)
   {
     color:red;
   }
于 2013-08-29T04:32:56.693 に答える