Как сбросить счетчик CSS в атрибут start данного списка

Ответ 1

Вы можете просто использовать атрибут start в качестве фильтра:

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

Demo, но это применимо только к этому атрибуту ol. Для извлечения значения атрибута вам понадобится некоторый javaScript, чтобы сгенерировать правильный counter-reset.

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

см. это: DEMO для генерации 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>

Ответ 2

Я вижу, что это старый вопрос, но я ставлю его здесь, потому что он может кому-то еще помочь.

Вы не можете прочитать атрибут в свойствах счетчика 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;">
    <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;
}

FIDDLE (http://jsfiddle.net/hcWpp/308/)

Ответ 3

Просто добавьте:

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;
}

Ответ 4

Просто предоставляя упрощенную версию решения GCyrillus JS

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

Я хочу, чтобы CSS мог читать и использовать числовые значения из атрибутов HTML :(

Ответ 5

Вернемся к старому вопросу, о котором я забыл.

В настоящее время есть пользовательские свойства CSS, которые можно использовать, даже в этом случае требуется добавить атрибут style помимо атрибута start

Пользовательские свойства (иногда называемые переменными 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>

Ответ 6

Для поддержки & lt; ol start = "10" & gt; даже если в Firefox был включен счетчик сброса:

$('ol[start]').each(function() {
    var val = parseFloat($(this).attr("start"));
    $(this).find("li").first().attr("value", val);
});

Сценарий jQuery основан на входных данных Дэниела Тонона.