Есть ли способ для CSS интерпретировать свойства `start` и / или` value` тегов `ol` и` li` для пользовательских альфа-счетчиков? - PullRequest
Новая
       16

Есть ли способ для CSS интерпретировать свойства `start` и / или` value` тегов `ol` и` li` для пользовательских альфа-счетчиков?

0 голосов
/ 17 июня 2019

Я конвертирую сайт с тысячами страниц, чтобы использовать счетчики CSS вместо стандартного представления списка HTML.Характер проекта значительно упрощает изменение CSS, а не HTML.Сайт использует много разных видов списков, и некоторые из них используют свойство start на уровне ol и / или свойство value на уровне li для продолжения предыдущих списков и / или пропуска значений.

До сих пор мне удавалось нацеливаться на разные списки и назначать им все нужные мне стили пользовательских списков, и даже изменять счетчики в содержимом нумерованных списков :before, используя attr(start) и * 1009.*.Чего я до сих пор не могу понять, так это как преобразовать эти числовые значения в буквы, когда мне нужен буквенный список, чтобы начать где-то кроме a или пропустить значение. 

<ol class="lower-alpha" start="2">
    <li>Explain...</li>
    <li>Describe...</li>
    <li value="5">Calculate...</li>
</ol>

ol.lower-alpha {
    list-style: none;
    counter-reset: special-little-letters;
    & > li { 
        list-style: none;
        &:before {
            content: counter(special-little-letters,lower-alpha);
        }
        counter-increment: special-little-letters;
    }
    &[start] { 
        counter-reset: special-little-letters attr(start); /* doesn't work */
    }
    & > li[value]:before {
        counter-reset: special-little-letters attr(value); /* doesn't work */
        content: counter(special-little-letters,lower-alpha)
    }
}

Я хочусписок букв, который идет b, c, e.Я получаю a, b, c и ошибку "Недопустимое значение свойства" при проверке результатов.

1 Ответ

0 голосов
/ 17 июня 2019

Если вы хотите, чтобы счетчик начинался с b, вам нужно увеличить счетчик на ol.lower-alpha. Затем, если вы хотите пропустить d для атрибута value, вам просто нужно снова вызвать counter-increment в ol.lower-alpha>li[value]:before.

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

ol.lower-alpha {
  list-style: none;
  counter-reset: special-little-letters;
  counter-increment: special-little-letters;
}

ol.lower-alpha>li {
  list-style: none;
  counter-increment: special-little-letters;
}

ol.lower-alpha>li:before {
  content: counter(special-little-letters, lower-alpha);
}

ol.lower-alpha[start] {
  counter-reset: special-little-letters;
}

ol.lower-alpha>li[value]:before {
  counter-increment: special-little-letters;
}
<ol class="lower-alpha" start="2">
  <li>Explain...</li>
  <li>Describe...</li>
  <li value="5">Calculate...</li>
</ol>
...