Применение `nth-of-type` к определенному классу работает некорректно

Question

Мне нужны голубые линии, начиная со 2-го (!), Чтобы иметь параметр margin-top. На основе приведенного ниже кода строка Example_1 остается без изменений, а Example_2 , Example_3 ... Example_999 do имеют margin-top.

Голубые линии относятся к классу example, но ol > li::span.example::nth-of-type(n+2) по какой-то причине не работает.

Что я делаю неправильно при реализации example класс к nth-of-type(n+2) logi c?

Как видите, у меня есть 2 независимые упорядоченные списки ( # 1 - это 1, 2, 3 и # 2 - это просто 1). Конечно, мне нужно, чтобы в обоих списках работали nth-of-type logi c.

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  margin: 0 1vw 0 1vw;
  font-size: calc(0.5em + 2.3vw);
}

ol {
  list-style: none;
  counter-reset: mycounter;
  padding-left: 2.3em;
}

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

ol>li {
  counter-increment: mycounter;
  position: relative;
  margin-top: 1.5%;
  margin-bottom: 0.6%;
  --size: calc(0.5em + 2.3vw);
  line-height: calc(var(--size) + 0.5em);
}

ol>li::before {
  content: counter(mycounter);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-weight: bold;
  border-radius: 50%;
  background: #1f2c60;
  color: white;
  box-shadow: 0.045em 0.045em 0.07em rgba(0, 0, 0, 0.3);
  --size: calc(0.5em + 2.3vw);
  left: calc(-1 * var(--size) - 0.5em);
  width: var(--size);
  height: var(--size);
  text-align: center;
  line-height: var(--size);
  font-size: calc(var(--size) - 0.3em);
}

ol>li::span.example::nth-of-type(n+2) {
  margin-top: 3%;
}

.example {
  text-align: left;
  width: auto;
  color: #5d78e5;
  font-style: italic;
  font-weight: 400;
}

.example_translated {
  text-align: left;
  width: auto;
  color: #4b5ea7;
  font-style: italic;
  font-weight: 400;
}

<div class="meaning">
  <ol>
    <li>Meaning_1</li>
    <ul>
      <li><span class="example">Example_1</span></li>
      <li><span class="example_translated">Example_Translated_1</span></li>
    </ul>
    <li>Meaning_2</li>
    <ul>
      <li><span class="example">Example_2</span></li>
      <li><span class="example_translated">Example_Translated_2</span></li>
    </ul>
    <li>Meaning_3</li>
    <ul>
      <li><span class="example">Example_3</span></li>
      <li><span class="example_translated">Example_Translated_3</span></li>
    </ul>
  </ol>
</div>
<div class="meaning">
  <ol>
    <li>Meaning_1</li>
    <ul>
      <li><span class="example">Example_1</span></li>
      <li><span class="example">Example_2</span></li>
      <li><span class="example">Example_3</span></li>
    </ul>
  </ol>
</div>

Answer 1

Я бы предложил удалить элементы span внутри li s и применить класс .example непосредственно к элементам li. Затем вы можете использовать li.example:not(:first-child) в качестве селектора.

Примечание: элементы span встроены по умолчанию, поэтому вы не можете применить к ним верхний край.

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  margin: 0 1vw 0 1vw;
  font-size: calc(0.5em + 2.3vw);
}

ol {
  list-style: none;
  counter-reset: mycounter;
  padding-left: 2.3em;
}

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

ol>li {
  counter-increment: mycounter;
  position: relative;
  margin-top: 1.5%;
  margin-bottom: 0.6%;
  --size: calc(0.5em + 2.3vw);
  line-height: calc(var(--size) + 0.5em);
}

ol>li::before {
  content: counter(mycounter);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-weight: bold;
  border-radius: 50%;
  background: #1f2c60;
  color: white;
  box-shadow: 0.045em 0.045em 0.07em rgba(0, 0, 0, 0.3);
  --size: calc(0.5em + 2.3vw);
  left: calc(-1 * var(--size) - 0.5em);
  width: var(--size);
  height: var(--size);
  text-align: center;
  line-height: var(--size);
  font-size: calc(var(--size) - 0.3em);
}

ol>li::span.example::nth-of-type(n+2) {
  margin-top: 3%;
}

.example {
  text-align: left;
  width: auto;
  color: #5d78e5;
  font-style: italic;
  font-weight: 400;
}

.example_translated {
  text-align: left;
  width: auto;
  color: #4b5ea7;
  font-style: italic;
  font-weight: 400;
}
li.example:not(:first-child)  {
  margin-top: 20px;
  background: #faa;
}

<div class="meaning">
  <ol>
    <li>Meaning_1</li>
    <ul>
      <li class="example">Example_1</li>
      <li class="example_translated">Example_Translated_1</li>
    </ul>
    <li>Meaning_2</li>
    <ul>
      <li class="example">Example_2</li>
      <li class="example_translated">Example_Translated_2</li>
    </ul>
    <li>Meaning_3</li>
    <ul>
      <li class="example">Example_3</li>
      <li class="example_translated">Example_Translated_3</li>
    </ul>
  </ol>
</div>
<div class="meaning">
  <ol>
    <li>Meaning_1</li>
    <ul>
      <li class="example">Example_1</li>
      <li class="example">Example_2</li>
      <li class="example">Example_3</li>
    </ul>
  </ol>
</div>

Answer 2

Реализация, которую вы сейчас делаете, не имеет смысла, но вы близки.

ol > ul:nth-of-type(n+2) li span.example {
  margin-top: 3%;
  background-color: red;
}

Это то, что вы ищете. Чтение справа налево означает:

возьмите весь диапазон с примером класса, который находится внутри li, который находится внутри ul, начиная со второго ul, который является прямым сыном ol

Я добавил цвет фона, чтобы сделать его более заметным, попробуйте это в своем коде и сообщите мне.