0

タイトルが少し曖昧かどうかわかりませんが、

しかし、あなたが持っているとしましょう..

.topactive a:focus, .topactive a:hover, 
.sf-menu a:active:first-child, .sf-menu li.sfHover:first-child {
}

そしてあなたのhtmlであなたが見ている：

すべての ul および li クラス宣言。

<ul class="sf-menu">
<li class="current">
<p class="topactive"><a href="#a">About Us</a></p>
        <ul class="menu2"><li>submenu</li></ul></li>
    <li>something</li>
        <ul><li>submenu</li></ul>
</ul>

一番左の李のみを対象にする必要があります。

私の現在のコードのように、cssは「例」のみを選択していますか?最初のレベルのulのみを明示的に選択することはできず、ulの最初のインスタンスのみを選択します。

これが理にかなっていることを願っています。あいまいさをお詫びし、私の他の質問を手伝ってくれた人に感謝します。

4

2 に答える 2

2

最上位の最初のレベルの子のみを選択するにはul、先祖と先祖からの距離を明示的に参照する何らかの方法が必要です。を使用することをお勧めしますid：

#idOfTopMostUL > li {
    /* CSS for the first-level li-elements */
}
#idOfTopMostUL ul li {
    /* CSS for other li elements, that are children of ul elements within the ul */
}

次のような HTML が必要になります。

<ul id="idOfTopMostUL">
    <li>example
        <ul><li>submenu</li></ul></li>
    <li>something
        <ul><li>submenu</li></ul></li>
</ul>

JS フィドルのデモ。

HTML を修正しました (aを別の(または)ulの直接の子にすることはできません)。ulol

を与えたくない、または与えられない場合は、外部の別の祖先を参照できますul(id最初ulのレベルのli要素は、ネストされた要素よりもその祖先に近いためli):

<div id="parentDiv">
    <ul>
        <li>example
            <ul><li>submenu</li></ul></li>
        <li>something
            <ul><li>submenu</li></ul></li>
    </ul>
</div>

そしてCSS：

#parentDiv > ul > li {
    /* CSS for the first-level li-elements */
}
#parentDiv ul ul li,
#parentDiv ul li ul li {
    /* CSS for other li elements, that are children of ul elements within the ul */
}

JS フィドルのデモ。

于 2012-04-19T12:20:36.757 に答える
0

あなたが示している特定の CSS は、あなたが示した HTML で何も選択していません。最初の 2 つのルールは必要です.topactiveが、HTML にはありません。次の 2 つのルールはどちらも必要です.sf-menuが、HTML にも存在しません。

オブジェクトの最初のレベルの子のみが必要な場合は>、ルールで直接の子指定子を使用します。

実際に表示された HTML では、次の CSS を使用して、最上位の u​​l のすべての第 1 レベルの li 要素を選択できます。

body > ul > li

しかし、現実の世界では、トップ レベルの ul オブジェクトをクラスまたは ID で指定し、次のようにするでしょう。

#myTop > li

また

.myTop > li

myTopクラスまたは ID を最上位UL要素に配置する場所。

于 2012-04-19T12:19:42.557 に答える