html - 仅使用 css 控制特定的 ul

Question

我在一个 div 类下有三个动态创建 ul。所有三个都有相同的类名，li 也有相同的类名。我怎样才能只使用 css 控制第二个 ul。

<div class="main">
<ul class="level_0">
<li></li>
<li></li>
</ul>

<ul class="level_0">
<li></li>
<li></li>
</ul>

<ul class="level_0">
<li></li>
<li></li>
</ul>
</div>

请指导我...

Answer 1

你可以写一个规则，比如

div.main ul:nth-of-type(2) {
   /* This will select 2nd ul */
}

演示

Answer 2

Demo

Css code:

ul:nth-child(2) {  
   color: #ccc;
}

a website with easy explanation: http://css-tricks.com/how-nth-child-works/

Answer 3

试试这个：

.main .level_0:first-child + .level_0 

更多信息 相邻选择器 W3C

Answer 4

You can use the nth-child selector:

ul:nth-child(2)

Doing so you select the second UL of it's parent.

More info here: http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 5

You could give them a ID like:

<ul class="level_0" ">
     <li></li>
</ul>

<ul class="level_0" id="nmbr_2">
     <li></li>
</ul>

<ul class="level_0" ">
     <li></li>
</ul>

and your css :

#nmbr2{
   //style
}