css - 按类(class)和第 n 个 child 分开列表

Question

我认为这是个愚蠢的问题，但我找不到答案..问题是...如果我有 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>   

我试过......按类别选择 ul。没用

.class:nth-child () {}

... 选择 li.. NOT WORKED

.class li:nth-child () {}

... 其他选择 li... 未使用

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

有什么想法吗？

Answer 1

如果你想用 :nth-child 选择第二个 ul DEMO

ul:nth-child(2) {
  background: green;
}

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

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

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

ul.class {
  background: green;
}

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

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>