Ориентация на вложенные элементы в списке с одинаковым атрибутом класса

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>`

Я пытаюсь настроить таргетинг / стилизацию элементов списка с атрибутом class «blue».Я пробовал .blue {color: red} и .blue ul li {color: red} и некоторые другие комбинации, но, похоже, ничего не работает.

Answer 1

я изменил кавычки.

<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>