4

HTML で使用<ol type="1">すると、次のような順序付きリストを取得できます。

  1. 私はチーズが好きです
  2. クッキーいいですね
  3. クリームいいなぁ…

<ol>このように、奇数番号のみを持つ順序付きリストを取得するにはどうすればよいでしょうか?

1.チーズが好き

3.食事がうまい

5.星に願いを…

4

2 に答える 2

8

利用可能な属性は次のように見えるため（HTML5を含む）、通常の順序付きリストではこれを達成できないと思います。

  • type (番号付けタイプを示します)
  • start (開始値を示します)
  • reversed (リストが逆順かどうかを示します)

ただし、以下のスニペットのような CSS カウンターを使用して実現できます。CSS カウンターは新しいものではなく、非常に優れたブラウザー サポートを備えています。

これをカウンターで実装するのは非常に簡単で、次の手順のみが必要です。

  • counter-reset親のプロパティを使用してカウンターを作成 (リセット) します。通常、このcounter-resetプロパティは、カウンターの名前と開始値をパラメーターとして受け取ります。ここでは、開始値として -1 を使用しましliた。増分は毎回 2 ずつ必要であり、開始値は 1 である必要があるためです (つまり、-1+2 = 1)。
  • liaに遭遇するたびにカウンターの値を 2 ずつ増やします。これにより、カウンタは奇数の値のみを持つようになります。このcounter-incrementプロパティも一般に 2 つのパラメータを受け取ります。1 つはカウンタ名で、もう 1 つはインクリメントする値です。
  • :before擬似要素とcontentプロパティを使用して、リスト項目の前にカウンターの値を表示します。

ol {
  counter-reset: odd-numbers -1;
  list-style-type: none;
}
li {
  counter-increment: odd-numbers 2;
}
li:before {
  content: counter(odd-numbers) ". ";
}
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

開始値として -1 を設定しない別のオプションは、li:first-childセレクターを使用してカウンターを 1 だけインクリメントすることです (デフォルト値であるため、 で指定する必要はありませんcounter-increment)。残りの部分では、liそれを 2 ずつ増やすことができます。

ol {
  counter-reset: odd-numbers;
  list-style-type: none;
}
li:first-child {
  counter-increment: odd-numbers;
}
li {
  counter-increment: odd-numbers 2;
}
li:before {
  content: counter(odd-numbers) ". ";
}
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

于 2016-11-15T04:40:15.887 に答える
1

1 つの解決策は、偶数要素を非表示にするこの css ルールを使用することです。

li:nth-child(2n) {
  visibility: hidden;
  position: absolute;
}

li次に、偶数規則の間に空白を入れます。

<ol>
<li>1</li>
<li></li>
<li>3</li>
<li></li>
...
</ol>
于 2016-11-15T04:46:21.013 に答える