css - 定位列表中具有相同类属性的嵌套元素

Question

我刚学CSS，好像解决不了这个问题。 HTML 看起来像这样:

`<section class=”red”>
  <ul>
     <li class=”list-one”>item</li>
     <li class=”list-one”>item</li>
  </ul>
</section>
<section class=”red”>
  <ul>
    <li class=”list-one”>item</li>
    <li class=”list-one”>item</li>
  </ul>
</section>
<section class=”blue”>
  <ul>
    <li class=”list-one”>item</li>
    <li class=”list-one”>item</li>
  </ul>
</section>`

我正在尝试使用“蓝色”的类属性来定位/设置列表项的样式。我试过 .blue{color:red} 和 .blue ul li {color:red} 以及其他一些组合，但似乎没有任何效果。

Answer 1

” 引号对 HTML 无效。您可以尝试使用 ' 或 "

<style>
.blue ul li {
  color:blue;
}

.red ul li {
  color:red;
}
</style>

<section class="red">
  <ul>
     <li class="list-one">item</li>
     <li class="list-one">item</li>
  </ul>
</section>
<section class="red">
  <ul>
    <li class="list-one">item</li>
    <li class="list-one">item</li>
  </ul>
</section>
<section class="blue">
  <ul>
    <li class="list-one">item</li>
    <li class="list-one">item</li>
  </ul>
</section>