23

私は自己スタイルの番号付きリストを使用しています。start-attribute を読み取って CSS でカウンターに追加するにはどうすればよいですか?

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;

    /* this does not work like I expected */
    counter-reset: lis attr(start, number, 0);

}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}

フィドル

4

8 に答える 8

17

属性 start をフィルターとして使用できます。

ol[start="10"] {
   counter-reset: lis 9;
}

Demoですが、これはこのol属性にのみ適用されます。適用する属性値を取得し、正しい を生成するには、javaScript が必要ですcounter-reset。

<ins data-extra="Use of Scss">

これを参照してください:これらの行から 100 のルールを生成するデモ:

@for $i from 1 through 100 {
  .ol[start="#{$i}"] {
    counter-reset: lis $i ;
  }
}

次に、Scss がホスティングで利用できない場合に生成されたルールをコピーして貼り付けます。

</in>

<ins data-extra="jQueryFix">:

jQuery ソリューションは簡単にセットアップできます: DEMO

$( "ol" ).each(function() {
  var   val=1;
    if ( $(this).attr("start")){
  val =  $(this).attr("start");
    }
  val=val-1;
 val= 'lis '+ val;
$(this ).css('counter-increment',val );
});

: も機能することに注意してください$(this ).css('counter-reset',val );:)

.</ins>

于 2014-05-16T15:53:00.733 に答える
11

これは古い質問だと思いますが、まだ誰かを助けるためにここに置いています。

css カウンター プロパティの属性を読み取ることはできません。代わりに、インライン css を使用counter-resetして、特定のリストの開始番号を定義できます。
(はい、インライン CSS を使用するのがベスト プラクティスではないことはわかっていますが、このようなエッジ ケースには使用できますし、使用する必要があります)

最初の項目はリセット値を 1 ずつ増やします。そのため、カウンター名を指定するだけでなく、リストを開始する数値を 1 減算する必要があります。

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>

<!-- NOTE: List numbering starts at counter-reset + 1 -->
<ol style="counter-reset: lis 9;" start="10">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;
    counter-reset: lis; /* Resets counter to zero unless overridden */
}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}

フィドル (http://jsfiddle.net/hcWpp/308/)

[編集]: アクセシビリティとプログレッシブ エンハンスメントに対処するために提案されているように start 属性を保持

于 2018-10-31T15:51:54.537 に答える
2

私が忘れていた古い質問に戻ります。

今日では、使用できるCSS カスタム プロパティがありますが、その場合でも、属性の横に属性を追加する必要があります。stylestart

カスタム プロパティ (CSS 変数またはカスケード変数と呼ばれることもあります) は、ドキュメント全体で再利用される特定の値を含む CSS 作成者によって定義されたエンティティです。これらは、カスタム プロパティ表記 (例: --main-color: black;) を使用して設定され、var() 関数 (例: color: var(--main-color);) を使用してアクセスされます。

例（コードが生成された場合、両方の値を同じに設定して間違いを避ける方が簡単なようstart=xです var(--s:x)）：

ol {
    list-style-type: none;
    /* this does not work like I expected
    counter-reset: lis attr(start, number, 0); */
    
    /* update using the css varaiable from html */
    counter-reset: lis calc(var(--s) - 1) ;
    /* calc() is used to keep html attributes values coherent */

}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}
<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10" style="--s:10"><!-- or set it right away to nine to get rid of calc() in the css rule-->
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>
<ol start="30" style="--s:30"><!-- or set it right away to twenty nine to get rid of calc() in the css rule -->
    <li>Number Thirty</li>
    <li>Number Thirty one</li>
    <li>Number Thirty two</li>
</ol>

それは答えになるには遅すぎますが、今から他の人に役立つ可能性があります.

于 2019-09-25T11:48:59.630 に答える
1

追加するだけです：

ol:not(:nth-of-type(1)){
    counter-increment: lis 10;
}

デモフィドル

残念ながら使用できませんが、ルールを追加attrして増分量を変更できます。counter-reset

代替案 1

複数のリストを作成する場合、より回復力のあるバージョンは次のようになります。

ol {
    list-style-type: none;
    /* this does not work like I expected */
    counter-reset: lis;

}
ol:not(:first-of-type){
     counter-increment: ol
}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}
ol:not(:first-of-type) li:before {
    content: counter(ol) counter(lis)". ";
    color: red;
}

代替案 2

数値のプレフィックスが何でもよい場合、以下はこれに対応します。

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol>
    <li data-prefix="1">Number Ten</li>
    <li data-prefix="1">Number Eleven</li>
    <li data-prefix="1">Number Twelve</li>
</ol>
<ol>
    <li data-prefix="a">Number Ten</li>
    <li data-prefix="b">Number Eleven</li>
    <li data-prefix="c">Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;
    counter-reset: lis;
}
li {
    counter-increment: lis
}
li:before {
    content: attr(data-prefix) counter(lis)". ";
    color: red;
}
于 2014-05-16T15:36:14.653 に答える