0

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

<li>子要素のクラスでベースのスタイルを設定するにはどうすればよいですか?

例：

<div class"options">
<ul>
   <li> <a href="#"> option 1 </a> </li>
   <li> <a href="#"> option 2 </a> </li>
   <li> <a class="last" href="#"> option 3 </a> </li>

   <li> <a href="#"> option 4 </a> </li>
   <li> <a href="#"> option 5 </a> </li>
   <li> <a class="last" href="#"> option 6 </a> </li>

   <li> <a href="#"> option 7 </a> </li>
   <li> <a href="#"> option 8 </a> </li>
   <li> <a class="last" href="#"> option 9 </a> </li>
</ul>
</div>

aでスタイリングできます.options li a.last { ... }

margin:0しかし、私が望むのは親に適用することであり、内部にあるものだけliを制御する方法がありません。<li><a>

スタイルのコツはありますか？

私が達成しようとしていること：

ここに画像の説明を入力

クラスを.last3番目ごとに追加するjQueryループがあります<li>

$(".box-left li").each(function (i) {
    if ((i+1) % 3 == 0) 
        $(this).addClass("last");
});

しかし、javascript ヘルパーを使用しない他の方法があるかどうかを知りたかったのです。

4

3 に答える 3

1

悲しいことに、これはCSSでは実行できません。私が提供できる最善の方法はjQueryとその:hasセレクターです。

aまたは、タグの代わりにタグにすべての余白/パディングを作成しますli。これにはいくつかのシャッフルが含まれますが、必要なものを実現します

于 2012-11-08T11:04:57.293 に答える
0

残念ながら、現在、CSSで親要素を選択する方法はありません。

この質問は何度も聞かれましたが、この答えは非常にうまくまとめられているようです。

于 2012-11-08T11:07:43.943 に答える
0

子要素の親要素を選択する可能性はありません。Li{line-height:20px;} li a{display:block;} を指定します。

于 2012-11-08T11:52:02.233 に答える