6

リストアイテムの横にある画像を、その位置に基づいて動的に設定することに興味があります。以下に、CSSのカウンター機能を使用してリスト項目を追跡していること、およびカウンターを使用してリストスタイルタイプとして画像を指定しようとしていることがわかります。

ul{
    counter-reset:list;
}
li
{
    counter-increment:list;
    list-style:disc outside url("http://dummyimage.com/" counter(list) "x" counter(list) "");
}
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

URL宣言でカウンターを機能させる正しい方法は何ですか？それも可能ですか？

4

3 に答える 3

3

counter()関数はプロパティにのみ使用できcontentます。上記で作成しようとしているようなURL構成は、CSSでは不可能です。

于 2013-03-27T09:58:16.893 に答える
3

URLを複数の文字列から構成することはできません

たとえば、この作品：

url("http://dummyimage.com/10x10");

しかし、これは機能しません：

url("http://dummyimage.com/" "10x10");

カウンターはそれとは何の関係もありません

一方、変数を使用してそれを行うことができる可能性があります。たとえば、LessCSSを調べてみてください。

于 2013-03-27T10:32:59.873 に答える
2

何を達成しようとしているのかわかりませんが、役立つと思われるサンプルコードは次のとおりです。サンプルコード

html

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

css

ul { counter-reset: list; }
li {
  counter-increment: list;
  list-style: disc outside url("http://placekitten.com/20/20");
}
li:before {
  counter-increment: section;
  content:"Item " counter(list) ". ";
}
于 2013-03-27T09:59:59.863 に答える