css - with some s having pseudo-elements and others not

Question

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

I want to have some <li>s in a single <ol> styled with ::before and ::after pseudo-elements (the < and > in items 2 and 3 above). Right now, I have it built as two lists. I am trying to find a way to do that using just one <ol> rather than two, so I can avoid having to use 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>

my working solution:

.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

您可以使用相邻的同级组合+器 ,来选择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>