html - 改变属于不同_类_的 LI 元素之间的距离

Question

如何在不改变 Text_2 和 之间的距离的情况下增加 Text_2 和 Text_4 之间的距离>Text_3?

Text_2和Text_4属于一个类，而Text_3 - 到另一个。

更新:代码应将边距应用于与.example 相关的所有元素类 - 不仅是“最后一个 child ”，还是“第二个”。

我试过 .not 选择器:ol.circle ul > li: not(.example_translated) 但由于某种原因它无法正常工作...

fiddle

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

.meaning {
  width: auto;
  text-align: left;
  color: #1f2c60;
  font-size: calc(0.5em + 2.3vw);
}

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

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

ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 3em;
  margin-left: 1vw;
}

li {
  line-height: calc(1em + 1.5vw);
}

ol.circle>li {
  position: relative;
  counter-increment: item;
  margin-top: 1.5%;
}

ol.circle>li::before {
  position: absolute;
  transform: translateX(-1.73em);
  content: counter(item);
  display: inline-block;
  text-align: center;
  color: white;
  z-index: 2;
}

li::after {
  content: " ";
  position: absolute;
  width: calc(0.5em + 2.3vw);
  height: calc(0.5em + 2.3vw);
  border-radius: 50%;
  background: #1f2c60;
  left: -2.2em;
  top: 0.05em;
  z-index: 1;
}

<div class="meaning">
  <ol class="circle">
    <li>Text_1</li>
    <ul>
      <li><span class="example">Text_2</span></li>
      <li><span class="example_translated">Text_3</span></li>
      <li><span class="example">Text_4</span></li>
    </ul>
  </ol>
</div>

Answer 1

在这种情况下你可以使用多种方式

方式一:

ol.circle ul > li:nth-child(2) {
    margin-bottom: 30px;
}

方式二

ol.circle ul > li:last-child {
    margin-top: 30px;
}

方式三

ol.circle li > span.example_translated {
  margin-bottom: 30px;
  display:block;
}

用于 jQuery 代码的通用解决方案

jQuery(document).ready(function($){
            jQuery('.example_translated').parent('li').css('margin-bottom', '30px');
});