32

次のような単純なリストがあるとしましょう。

<ol>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li class="count">seven</li>
</ol>

今、クラス「count」でリスト項目に番号を付けたいだけです

したがって、CSS を追加すると:

li {
    list-style-type: decimal;
}

次に、クラスのないリスト項目の list-style-type を削除します。

li:not(.count) {
    list-style-type: none;
}

私はこれを得る：

フィドル

li {
  list-style-type: decimal;
}
li:not(.count) {
  list-style-type: none;
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

ここでの明らかな問題は、クラスのないリスト項目もここで「カウント」され、表示されないことです。

したがって、上記の例では、リストに 7 の番号を付ける必要があります。番号付けでは、クラスのないリスト項目はスキップされます。これはCSSで行うことができますか？

4

7 に答える 7

34

これはCSSカウンターで行うことができます

カウンターで生成されたコンテンツを設定display:noneすると、カウンターはそれをスキップして、次のアイテムに進みます!

フィドル

（編集：または、代わりに-他の人が指摘したように-特定のクラスを持つ要素でのみカウンターをインクリメントできます-そのように）

ol {
  counter-reset: count;
  list-style-type: none;
  padding-left: 30px;
}
li:before {
  content: counter(count)".";
  counter-increment: count;
}
li:not(.count) {
  padding-left: 13px;
}
li:not(.count):before {
  display: none;
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

実際、カウンターを使用すると、クラスをカウントできるだけでなく、セレクターの組み合わせもカウントできます。

概念実証の例を次に示します。

html {
  counter-reset: divs;
}
body {
  counter-reset: paragraphs;
  position: relative;
}
div {
  counter-increment: divs;
}
.wpr {
  counter-reset: count-me;
  position: relative;
}
.container {
  position: relative;
  border-bottom: 1px solid green;
}
.container .count-me {
  counter-increment: count-me;
}
.container p {
  counter-increment: paragraphs;
}
.wpr:after {
  content: "Number of count-me classes in container:" counter(count-me);
  position: absolute;
  bottom: -20px;
}
.container:after {
  content: "Number of paragraphs:" counter(paragraphs);
  position: absolute;
  bottom: -40px;
}
body:after {
  content: "Number of divs:" counter(divs);
  position: absolute;
  bottom: -60px;
}
<div class="wpr">div1
  <div class="container">div2
    <div>div3
      <span class="count-me">count-me</span>
    </div>
    <div>div4
      <span class="count-me">count-me</span>
      <p>I"m a paragragh</p>
    </div>
    <div>div5
      <p>I"m a paragragh</p>
    </div>
    <div>div6
      <span class="count-me">count-me</span>
    </div>
    <div>div7
      <span class="count-me">count-me</span>
      <p>I"m a paragragh</p>
    </div>
    <div>div8</div>
  </div>
</div>

于 2014-11-10T10:42:55.257 に答える
9

クラスdisplay: blockなしでli要素に与えることも機能しています。.count

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li:not(.count) {
    display: block;
}

働くフィドル

古いブラウザの場合:

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li {
    display: block;
}
li.count {
    display: list-item;
}

働くフィドル

li別の方法として、すべての要素の表示状態を変更する予定がある場合は、 display as list-item で:after/:before疑似クラスを使用します。

働くフィドル

于 2014-11-10T10:52:20.690 に答える
3

CSS 2.1 仕様のカウンター セクションには、カスタム カウンターを実装する方法のさまざまな例が含まれています。以下は非常に単純な例です。

  1. カウンター変数を定義する
  2. 特定の要素に対してインクリメントします（あなたの場合は.count要素になります）
  3. 疑似要素内に表示する

.custom-counter {
  /* define a counter variable */
  counter-reset: clumsycount 0;
  /* style */
  list-style-type: none;
}
.custom-counter .count {
  /* increment the counter variable */
  counter-increment: clumsycount 1;
  /* style */
  position: relative;
  background-color: #EEE;
}
.custom-counter .count:before {
  /* display the counter variable */
  content: counter(clumsycount) ".";
  /* style */
  position: absolute;
  top: 0;
  right: 100%;
  padding-right: .25em;
  background-color: #CCC;
}
<ul class="custom-counter">
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ul>

于 2014-11-10T17:22:59.123 に答える
3 
li {
    list-style-type: decimal;
}

li:not(.count) {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      appearance: textfield;
}

これは単純なハックですhttp://jsfiddle.net/9w9vkcf3/1/

このappearanceプロパティは、ユーザーのオペレーティング システムのテーマに基づくプラットフォーム固有のスタイルを使用して要素を表示するために使用されます。ソース

于 2015-04-25T15:55:45.103 に答える
3

HTML を使用して、リスト項目の値を具体的に設定できます。

<ul>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li value="5" class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li value="7" class="count">seven</li>
</ul>

http://jsfiddle.net/03bu5sct/1/

純粋な CSS ソリューションが必要な場合は、CSS3 カウンターも参照してください。

于 2014-11-10T10:49:47.767 に答える
1

1 つの解決策として、CSS カウンターを使用し、疑似要素を使用してそれを適用することが考えられます。カウンターでコンテンツプロパティを進める前に、

カウンターは、'counter()' または 'counters()' の 2 つの異なる関数で指定できます。前者には、'counter(name)' または 'counter(name, style)' の 2 つの形式があります。生成されたテキストは、この疑似要素のスコープ内の指定された名前の最も内側のカウンターの値です。指定されたスタイル (デフォルトでは「10 進数」) でフォーマットされます。後者の関数には、'counters(name, string)' または 'counters(name, string, style)' の 2 つの形式もあります。生成されたテキストは、指定された文字列で区切られた最も外側から最も内側まで、この疑似要素のスコープ内にある指定された名前を持つすべてのカウンターの値です。カウンターは指定されたスタイル (デフォルトでは「10 進数」) でレンダリングされます。詳細については、自動カウンターと番号付けに関するセクションを参照してください。名前は「none」であってはなりません。「継承」または「初期」。このような名前を使用すると、宣言が無視されます。

liclass を持つ要素のみcount:

body {
  counter-reset: section;/* Set the section counter to 0 */
}
ol {
  list-style-type: none;
}
li.count::before {
  counter-increment: section;/* Increment the section counter*/
  content: counter(section)". ";/* Display the counter */
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

参考文献

カウンターインクリメント

カウンターリセット

于 2015-04-24T14:23:16.247 に答える
0

どうぞ：

https://jsfiddle.net/Cheese1991/qnmhvvxj/

HTML:

<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>

CSS:

ul {
    counter-reset:yourCounter;
    list-style:none;
}
ul li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
ul li:not(.skip):before {
    content:counter(yourCounter) ". ";
}
ul li.skip:before {
    content:"\a0\a0\a0";
}

これがお役に立てば幸いです

于 2015-05-01T08:23:36.450 に答える