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

いくつか<li>の s を単一<ol>のスタイルの with::beforeおよび::after疑似要素 (上記の項目 2 および 3 の < および >) に含めたいと考えています。現在、2 つのリストとして作成しています。<ol>2 つではなく1 つだけを使用してそれを行う方法を見つけようとしているので、使用する必要がなくなります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:'>';
}
4

2 に答える 2

2

前の兄弟を持つ要素を選択するために、隣接兄弟コンビネータ+を使用できます。lili

.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>

于 2015-11-20T19:44:06.467 に答える
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>

于 2015-11-20T19:44:27.527 に答える