将"nth-of-type"应用于某个类无法正常工作

Question

我需要浅蓝色的线，从第二个(！(开始，有一个margin-top参数。根据下面的代码，第 Example_1行保持原样，而Example_2Example_3......Example_999确实有margin-top.

浅蓝色线条example类，但由于某种原因ol > li::span.example::nth-of-type(n+2)不起作用。

我在将example类实现到nth-of-type(n+2)逻辑时做错了什么？

如您所见，我这里有 2 个独立的有序列表(#1 是 1、2、3，#2只是1(。当然，我需要上述nth-of-type逻辑在两个列表中都起作用。

.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

我建议擦除lis中的span元素，并将.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;
}

这就是您要搜索的内容。 从右到左阅读意味着：

以类示例的所有跨度为例，这些示例位于 UL 内部的 Li 中，从第二个 UL 开始，第二个 UL 是 ol 的直系子

项我添加了一个背景颜色以使其更明显，请在您的代码中尝试此操作并告诉我。