2

複数のネストを持つリストがあります。css をどのように記述すれば、第 1 レベルがディスクとしてリスト スタイルになり、第 2 レベルが円として、第 3 レベルが正方形などになるようになりますか?

私のhtmlは次のとおりです

<ul>
  <li>Alpha</li>
  <li>Beta
    <ul>
      <li>Apple</li>
      <li>Mango
       <ul>
        <li> Item 1<li>
        <li> Item 2</li>
          .
          .
            .
            .
                nesting up to the nth degree
         </ul>
      </li>
   </ul>
 </li>

</ul>
4

4 に答える 4

1

style="list-style:____;"<ul> に追加して<ul style="list-style:____;">手動で行うか、各 <ul> を通過するループを使用して jQuery ドキュメントを作成し、その変更.css("list-style:____;")を行う 2 つの方法があります。

于 2013-07-05T12:57:17.730 に答える
0

さまざまなスタイルを n 要素の係数で繰り返すように自動的に作成できるとは思いません。できることは、適切な深さまでスタイルを設定し、残りのデフォルト スタイルを次のように作成することです。

ul { list-style-type: disc; }
li ul { list-style-type: circle; }
li li ul { list-style-type: square; }

別の解決策は、スタイルごとにクラスを作成し、これが自動的に生成されると仮定して、カウンターを使用してスタイルを設定することです。

.style1 { list-style-type: disc; }
.style2 { list-style-type: circle; }
.style3 { list-style-type: square; }

次に、ループで深度カウンターを開始し、それを使用してクラスを設定します。

<ul class="style<?php echo $depth % 3; ?>">

これにより、深度に応じてスタイルが自動的に適用されるため、4 番目の ul には style1、5 番目の style2、6 番目の style3 などがあります。

お役に立てれば。

于 2013-07-05T13:00:42.870 に答える
0

組み合わせを確立しながら順番に進みますul li。

html

<div class="first">
  <ul>first
     <li>Alpha</li>
     <li>Beta
        <ul>
           <li>Omega</li>
        </ul>
     </li>    
  </ul>
</div>

CSS

.first ul{
  color:red;
}
.first ul li{
  color:green;
}
.first ul li li{
  color:blue;
}

リンク例 ： jsfiddle

于 2013-07-05T12:59:44.813 に答える