как использовать пользовательский тип без сектора в css - PullRequest
Новая
       3

как использовать пользовательский тип без сектора в css

0 голосов
/ 01 апреля 2020

когда только один .onon игнорировать. когда больше чем один (два или более) урока вместе. выберите их.

некоторые из моих решений:

  1. использовать .lesson + .lesson, это не будет выбирать первый, когда более одного.
  2. : не ( .lesson: только тип) не работает.

html код ниже. большое спасибо. 

<ol>
    <li class="chapter">Chapter item 1</li>
    <li class="lesson">Lesson item 1</li>
    <li class="chapter">Chapter item 2</li>
    <li class="lesson">Lesson item 2</li>
    <li class="lesson">Lesson item 3</li>
  </ol>

1 Ответ

0 голосов
/ 08 апреля 2020

Вы не можете сделать это с вашим текущим html и чистым CSS.

Решением может быть переосмысление вашего hmtl и помещение уроков в список ваших глав. Я надеюсь, что этот пример поможет вам: 

.chapter-title {
  font-weight: bold;
}

.lessons li:not(:only-child) {
  color: #f00;
}
<ol>
  <li class="chapter">
    <span class="chapter-title">Chapter item 1</span>
    <ol class="lessons">
      <li>Lesson item 1</li>
    </ol>
  </li>
  <li class="chapter">
    <span class="chapter-title">Chapter item 2</span>
    <ol class="lessons">
      <li>Lesson item 2</li>
      <li>Lesson item 3</li>
    </ol>
  </li>
</ol>
...