<ol> 其中一些 <li> 具有伪元素，而另一些则没有

Question

1. quick brown fox
<2. jumped over>
<3. the lazy dog>

我想在单个 <ol> 中使用 ::before 和 ::after 伪元素（第 2 项和第 3 项中的 < 和 >多于）。现在，我将它构建为两个列表。我正在尝试找到一种只使用一个 <ol> 而不是两个的方法，这样我就可以避免使用 counter-reset.

.li_var {
  counter-reset: lt 1;
}
.li_var > li {
  counter-increment: lt;
}
.li_var > li::before {
  content: "<" counter(lt);
}
.li_var > li::after {
  content: ">";
}

<ol>
  <li>quick brown fox</li>
</ol>
<ol class="li_var">
  <li>jumped over</li>
  <li>the lazy dog</li>
</ol>

我的解决方案：

.li_var {
    list-style-type:none;
}
.li_var > li {
    counter-increment: lt;
}
.li_var > li:before {
    content: counter(lt) '. ';
}
.li_var li:nth-child(2), .li_var li:nth-child(3) {
     margin-left:-.6em;
}
.li_var li:nth-child(2):before, .li_var li:nth-child(3):before {
     content: '<' counter(lt) '. ';
}
.li_var li:nth-child(2):after, .li_var li:nth-child(3):after {
     content:'>';
}

Answer 1

您可以使用 adjacent sibling combinator, +，以便 select li 元素与前面的 li 兄弟姐妹：

.li_var {
    padding-left: 0;
}
.li_var > li {
    counter-increment: lt;
}
.li_var > li:before {
    content: counter(lt) '. ';
}
.li_var > li + li:before {
    content: '<' counter(lt) '. ';
}
.li_var > li + li:after {
    content: '>';
}

<ol class="li_var">
  <li>quick brown fox</li>  
  <li>jumped over</li>
  <li>the lazy dog</li>
</ol>

Answer 2

根据您想要的效果，您可以使用 first-child, last-child, nth-child 等 CSS 选择器来控制要设置样式的元素。

这是一个使用 first-child 的简单示例：

.li_var > li {
  counter-increment: lt;
}
.li_var > li::before {
  content: "<" counter(lt);
}
.li_var > li::after {
  content: ">";
}
.li_var > li:first-child::before {
  content: "";
}
.li_var > li:first-child::after {
  content: "";
}

<ol class="li_var">                             
   <li>quick brown fox</li>   
   <li>jumped over</li>
   <li>the lazy dog</li>
</ol>

这是一个使用 nth-child 的例子：

.li_var > li {
  counter-increment: lt;
}
.li_var > li:nth-child(n+2)::before {
  content: "<";
}
.li_var > li:nth-child(n+2)::after {
  content: ">";
}

    <ol class="li_var">                             
       <li>quick brown fox</li>   
       <li>jumped over</li>
       <li>the lazy dog</li>
    </ol>

<ol> 其中一些 <li> 具有伪元素，而另一些则没有

<ol> with some <li>s having pseudo-elements and others not

css

pseudo-element

css-counter