2

CSS を使用して、連続した番号付けと逆順の順序付きリストを取得したいと思います。添付図を参照してください。

ここに画像の説明を入力

当然、結果のリストを逆順、つまり [5]、[4] などにしたいと思います。

CSS 部分を再設計する必要がありますか、それとも単純な変更ですか? 逆番号を取得する方法がわかりません。

PS: コードを質問に入れなかったことをお詫びします。スタック オーバーフローは、プレビューですべてが正しく形成されていたにもかかわらず、何か問題があると言い続けました。それを「修正」しようとして数分後、私は忍耐力を失いました。

4

2 に答える 2

3

CSS カウンターの使用

現在、no ol . の要素は動的です。リスト全体の表示順序を逆にしても問題ない場合は、この回答をご覧ください。

これを実現するために、カウンタと一緒に JavaScript を少し利用できます。アプローチは次のようになります。

  • JS を使用して、ページが読み込まれたときliCountに該当するli要素の数 ( ) を取得します。
  • 該当するすべての要素を含む親コンテナーliCountのプロパティの 2 番目のパラメーターとして設定します。プロパティの 2 番目のパラメーターは、カウンターの初期値/開始値を表します。counter-resetolcounter-reset
  • CSS では-1、プロパティの 2 番目のパラメーターとして設定しcounter-incrementます。通常、2 番目のパラメーターは、カウンターが毎回インクリメントされる数値です。ここでは、値が-1カウンターとして設定されているため、実際にはデクリメントされます。
  • :before通常どおり、疑似要素を使用してカウンターの値を表示します。

window.onload = function() {
  var liCount = document.querySelectorAll('ol > li').length;
  document.body.setAttribute('style', 'counter-reset: li ' + (liCount + 1));
}
ol {
  list-style-type: none;
  margin-left: 20px;
  padding: 0px;
}
ol > li {
  counter-increment: li -1;
}
ol > li:before {
  content: "[" counter(li) "]";
  padding-right: 10px;
}
<div id="content">
  <h3>Year</h3>
  <ul>
    <li><a href="#2010-2015">2010-2015</a></li>
    <li><a href="#2007-2008">2007-2008</a></li>
  </ul>
</div>
<h3 id="2010-2015">2010-2015</h3>
<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<h3 id="2007-2008">2007-2008</h3>
<ol>
  <li>D</li>
  <li>E</li>
</ol>

なぜ属性を反転させないのですか？

  • CSS カウンターのブラウザー サポートは、反転した HTML5 属性よりもはるかに優れています。reversed 属性は、IE と Opera ではまったくサポートされていません。
  • counter-resetJS は、使用されるアプローチ (カウンターにstart値を割り当てるため、 に値を割り当てるため)に関係なく依然として必要ですが、番号付けが複数の順序付きリストにまたがっている場合、ol reversed設定用の JSは他のものよりもはるかに単純です。counter-reset

reversed以下は、属性を使用したサンプル スニペットです。リンクされたスレッドと他の回答 here から取られたので、私はアプローチの功績を認めません。上記のポイント 2 で説明したことを説明するためだけに、JS を追加して使用しました。

window.onload = function() {
  var liCount = document.querySelectorAll('ol > li').length;
  var olEls = document.querySelectorAll('ol[reversed]');

  var prevLiCount = 0;
  for (var i = 0; i < olEls.length; i++) {
    /* the below lines are required because start for first ol is from 5 whereas for next is from 2 */
    olEls[i].setAttribute('start', liCount - prevLiCount);
    prevLiCount = olEls[i].querySelectorAll('li').length;
  }
}
<div id="content">
  <h3>Year</h3>
  <ul>
    <li><a href="#2010-2015">2010-2015</a>
    </li>
    <li><a href="#2007-2008">2007-2008</a>
    </li>
  </ul>
</div>
<h3 id="2010-2015">2010-2015</h3>
<ol reversed="reversed">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<h3 id="2007-2008">2007-2008</h3>
<ol reversed="reversed">
  <li>D</li>
  <li>E</li>
</ol>

于 2015-07-16T17:04:05.783 に答える