Как я могу сбросить CSS-счетчик на начальный атрибут данного списка

Question

Как я могу сбросить CSS-счетчик на начальный атрибут данного списка

Я использую самозваный нумерованный список. Как прочитать атрибут start и добавить его в счетчик с помощью 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;
}

FIDDLE

29

css html-lists css-counter

Источник

user3637034 16 май '14 в 15:27

10 ответов

Другие вопросы по тегам css html-lists css-counter

user2442099 16 май '14 в 15:53 2014-05-16 15:53 · Answer 1 · 2014-05-16 15:53

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

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

Демо, но это будет применяться только для этого 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>

user4606812 31 окт '18 в 15:51 2018-10-31 15:51 · Answer 2 · 2018-10-31 15:51

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

Вы не можете прочитать атрибут в свойствах счетчика CSS. Вместо этого вы можете использовать встроенный CSS с counter-reset определить начальный номер для определенного списка.
(Да, я знаю, что не рекомендуется использовать inline 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;
}

http://jsfiddle.net/hcWpp/308/

user1611058 06 окт '15 в 05:59 2015-10-06 05:59 · Answer 3 · 2015-10-06 05:59

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

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

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

6

Источник

user1611058 06 окт '15 в 05:59

user6085864 09 авг '21 в 15:24 2021-08-09 15:24 · Answer 4 · 2021-08-09 15:24

Вы можете использовать настраиваемые свойства (переменные) CSS, см.

Например, используйте встроенные стили для списка и добавьте настраиваемое свойство --start-value: 1;. В CSS вы можете использовать это как var(--start-value, 0); с запасным значением ( 0). Если вы пропустите это настраиваемое свойство, список будет запускаться по умолчанию.

HTML

      <ol style="--start-value: 1;">
    <li>Number Two</li>
    <li>Number Three</li>
    <li>Number Four</li>
</ol>

CSS

      ol {
    list-style-type: none;

    counter-reset: lis var(--start-value, 0);
}
li {
    counter-increment: lis;
}
li:before {
    content: counter(lis)". ";
    color: red;
}

user404335 16 май '14 в 15:36 2014-05-16 15:36 · Answer 5 · 2014-05-16 15:36

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

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

user2442099 25 сен '19 в 14:48 2019-09-25 14:48 · Answer 6 · 2019-09-25 14:48

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

В настоящее время есть настраиваемые свойства 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>

Пока слишком поздно для ответа, но теперь может быть полезно кому-нибудь еще.

user903780 13 янв '23 в 15:45 2023-01-13 15:45 · Answer 7 · 2023-01-13 15:45

Вы пытаетесь составить список с пользовательскими маркерами, используя естественную нумерацию, верно? Вы можете использовать встроенный счетчик под названием list-item, вам не нужно определять свой собственный счетчик.

      ol {
    list-style: none;
}
li::before {
    content: counter(list-item) '. ';
}

Однако, если вы установите это программно, Chrome и Safari в настоящее время не применяют изменения без перерисовки (например, переключение отображения: нет).

user6128451 06 авг '19 в 15:06 2019-08-06 15:06 · Answer 8 · 2019-08-06 15:06

Для поддержки

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

Скрипт jQuery основан на вводе Дэниела Тонона.

0

Источник

user6128451 06 авг '19 в 15:06

user1844585 23 июл '21 в 12:48 2021-07-23 12:48 · Answer 9 · 2021-07-23 12:48

Мое решение: добавить класс без сброса. У меня это сработало!

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

CSS

      ol {
    list-style-type: none;
    counter-reset: lis;
}    
li:before {
    content: counter(lis)". ";
    counter-increment:lis;
    color: red;
}
ol.no-reset{
  counter-reset: none;
}

user2497377 23 фев '23 в 14:31 2023-02-23 14:31 · Answer 10 · 2023-02-23 14:31

Приведенный выше код спасает жизнь. Быстрая модификация: включите атрибут [start] в селектор CSS с помощью calc, чтобы мы могли различать, какие числа списка нужно вычислять. В противном случае вы должны установить начало и атрибут стиля для каждого списка (после первого использования этих атрибутов).