按类和n-child分开列表

时间:2016-01-30 13:06:10

标签: css

我认为这是一个愚蠢的问题,但我无法找到答案.. 问题是...... 如果我有2个列表,但我想为两个列表指定不同的值......代码将如何?

   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>

</ul>

<ul class="class">
    <li>a</li>
    <li>b</li>
</ul>   
我试过...... ...按CLASS选择ul。没工作

.class:nth-child () {}

...选择li ..没有工作

.class li:nth-child () {}

...其他选择李...没有工作

.class:li:nth-child () {}

任何想法?

1 个答案:

答案 0 :(得分:0)

如果您想使用:nth-child DEMO

选择第二个ul
ul:nth-child(2) {
  background: green;
}

如果您想从第二个li DEMO中选择ul

ul:nth-child(2) > li {
  background: green;
  margin: 5px;
  width: 50px;
}

或者您可以使用class选择第二个ul DEMO

ul.class {
  background: green;
}

或者,如果您想从第二个li DEMO中选择第二个ul

ul {
  list-style-type: none;
  padding: 0;
}

ul.class > li:nth-child(2) {
  background: green;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="class">
  <li>a</li>
  <li>b</li>
</ul>