2

適切な子ノードの選択に関して、CSS3 に関する簡単な質問があります。

以下は、現在の HTML 要素構造のスニペットです。

<nav>
    <ul>
        <li>
            <a href="#"><div class="adminNavButton"><p>Pages</p></div></a>
            <ul>
                <li><a href="#">Make a new page</a></li>
                <li><a href="#">Manage pages</a></li>
                <li><a href="#">Delete pages</a></li>
            </ul>
        </li>
and more .... </ul> </nav>

<a href="#"><div class="adminNavButton"><p>Pages</p></div></a>CSS3では、使用 するだけで選択しようとしています 

nav ul li a{
}

ただし、 の下のものを含むすべての子アンカー タグを選択します<ul><li>。問題を解決するには、クラス セレクターを指定する必要がありますか? すなわち

<nav>
    <ul>
        <li>
            <a class="something" href="#"><div class="adminNavButton"><p>Pages</p></div></a>

すべてのブラウザで機能するテクニックをご存知でしたら、教えていただければ幸いです。

前もって感謝します、

================================ コメントありがとうございます、 :first-child でも :nth-child( 1）メインプロジェクトからは機能しなかったため、新しいプロジェクトを作成してメソッドをテストしました。しかしうまくいかなかったので、ここに HTML 構造と CSS3 を示します。

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>asf</title>
    <style>
        ul li a:first-child{
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="">asf</a>
            <div>
                <a href="">asf</a>
            </div>
        </li>
        <li>
            <a href="">asfd</a>
            <div>
                <a href="">asf</a>
            </div>
        </li>
        <li>
            <a href="">asf</a>
            <div>
                <a href="">asf</a>
            </div>
        </li>
    </ul>
</body>


</html>

hmm heh =/ (ps Firefox と Chrome ブラウザーでテストしましたが、動作しませんでした)

4

2 に答える 2

1

最初の子の疑似クラスを使用できます。

nav > ul > li > a:first-child
{

}

あなたが望むことをする別のオプションは>セレクターです：

nav > ul > li > a
{

}

上記はPagesアンカーにのみ適用されます。は>子セレクターであるため、すべての子孫を対象とするスペースを使用する場合とは異なり、要素は直接の子である必要があります。の兄弟がいる場合Pages、それらの兄弟もターゲットにされますが、最初の例はそうではありません。

jsFiddle デモ

W3C ドキュメントから:

:first-child 擬似クラスは、他の要素の最初の子である要素を表します。:nth-child(1) と同じ。

于 2012-12-06T07:25:35.927 に答える
0

これでうまくいくはずです：

nav ul li a:first-child{
}

クラスを使用することもできますが、構造が (最初の位置で) 同じままである場合は、上記の例が最適なルートです。

于 2012-12-06T07:24:36.117 に答える