0

私はそのようなHTMLコードを持っています

<li data-bind="attr: { class: MenuItem.CssClass, 'data-Id': MenuItem.Id }">
    <div class="subMenuActions">
        <i class="icon-caret-right" />
        <i class="icon-caret-down" />
    </div>
    ...
    <ul class="subMenu"></ul>
</li>

空かどうかをチェックする要素iのセレクターを作りたいです。div.subMenuActionsul.subMenu

ul.subMenuCSS selector を使用して が空かどうかを確認できることはわかっていますが、 が空の場合はul.subMenu:empty非表示にする必要がi.icon-caret-downあります。i.icon-caret-rightul.subMenu

JSの回答はありません。

4

2 に答える 2

3

レベル 1 ～ 3 の CSS では、前の要素の兄弟または親要素を選択する方法はありません。ミシクが言うように、次の兄弟しか選べない。

あなたの場合、HTML で要素を並べ替え、要素の高さがわかっている場合は、次のul.submenuソリューションを使用できます。 

<li data-bind="attr: { class: MenuItem.CssClass, 'data-Id': MenuItem.Id }">
    <ul class="subMenu"></ul>
    <div class="subMenuActions">
        <i class="icon-caret-right"/>
        <i class="icon-caret-down"/>
    </div>
    ...
</li>

次に、この css を適用します。

li {
    position:relative;
    padding-bottom:2em;
}
ul.subMenu {
    height:2em;
    position:absolute;
    width:100%;
    bottom:0;
}
div.subMenuActions {
    position:relative;
}
ul, div { /* normalize to zero */
    margin:0;
    padding:0;
}
/* and the selectors */
ul.subMenu:empty + .subMenuActions > i,
ul.subMenu:empty + .subMenuActions + .subMenuActions > i {
    display: none;
}

http://jsfiddle.net/7VmR9/15/

全体として、JavaScript を使用する方がはるかに簡単です。

于 2013-07-13T13:17:18.860 に答える
1

残念ながら、CSS には「前の兄弟」セレクターはありません (少なくとも今のところ)。

.subMenuandの順序を変更して.subMenuActionsから、これを使用することしか提案できませんでした。

.subMenu:empty + .subMenuActions > i{
    display: none;
}

.subMenuActions結局のところ、いつでも必要な場所に表示するようにスタイルを設定できます。

于 2013-07-13T10:09:46.487 に答える