2

重複の可能性：
アクティブな子の親の複雑なCSSセレクター

CSSコンテキストメニューを作成していますが、サブメニューがあるすべてのリストアイテムのスタイルを変えて、サブメニューがあることをユーザーに視覚的に表現したいと考えています。

コンテキストメニューはUL要素であり、そのリスト項目はLIであり、サブメニューはULです。私はすでに機能を停止しています。サブメニュー項目のスタイルを変えて、明らかに異なるようにする必要があります。

コードと擬似コード：

私が持っているもの（作業中のCSS）：

.bhContextMenu,
.bhContextMenu LI UL{
background:white;
background:rgba(255,255,255,0.95);
border:0.5mm solid lightgray;
border-color:rgba(0,0,0,0.25);
border-radius:1mm;
box-shadow:0 1mm 2mm lightgray;
box-shadow:0 1mm 2mm rgba(0,0,0,0.25);
cursor:default;
display:none;
list-style:none;
margin:0;
padding:0;
position:absolute;
width:1.5in;
}
.bhContextMenu LI{
padding:1mm 4mm;
}
.bhContextMenu LI:hover{
 background: lightgray;
 background: rgba(0,0,0,0.1);
}
.bhContextMenu LI UL{
display:none;
list-style:none;
position:absolute;
left:1.5in;
margin-top:-1.5em;
}
.bhContextMenu LI:hover UL,
.bhContextMenu LI UL:hover{
display:block;
}
.bhContextMenu HR{
border: none;
border-bottom: 0.5mm solid lightgray;
}

私も欲しいもの（擬似コード）：

.bhContextMenu LI contining UL{
font-weight:bold;/* or something */
}
4

2 に答える 2

3

空の要素と空でない要素（あなたはそうではありません...）を区別しているだけでない限り、その内容に基づいて要素を選択することはできません。

あなたにできることは

  1. マークアップを変更して、サブメニューを含むメニュー項目のクラスを追加し、そのスタイルを設定します。

  2. 「非表示/折りたたみ」モードのサブメニューのスタイルを変更して、実際に表示されるようにします。ただし、サブメニューがあることを示すために使用する小さな矢印などとしてのみ使用します。ここでのデモ：http：//jsbin.com/ojociq/1/edit

于 2012-10-05T19:15:50.387 に答える
2

すでに述べたように、CSSセレクターでは、要求した内容を解決することはできません（仕様を参照）。

もちろん、リストアイテムにクラスを追加することもできますが、必要なものを解決する最も簡単な方法は、jQueryスクリプトの1行です。

$('li').has('ul').addClass('has-ul');​

デモ

于 2012-10-05T19:25:04.337 に答える