Я пытаюсь сделать что-то, что было очень просто, прежде чем атрибут start в тегах ol был устарел. Я просто хотел бы иметь пару упорядоченных списков на моей странице, но начинаю нумерацию второго списка, в котором первый закончен. Что-то вроде:
1. do stuff
2. do stuff
Here a paragraph
3. do stuff
Я видел, что свойства CSS counter-reset и counter-increment должны быть в состоянии достичь этого, но я не могу заставить его работать. Вот мой код:
<html>
<head>
<style type="text/css">
ol li { counter-increment: mycounter; }
ol.start { counter-reset: mycounter; }
ol.continue { counter-reset: mycounter 2; }
</style>
</head>
<body>
<ol class="start">
<li>You can't touch this</li>
<li>You can't touch this</li>
</ol>
<p>STOP! Hammer time.</p>
<ol class="continue">
<li>You can't touch this</li>
</ol>
</body>
</html>
Если честно, даже если бы это сработало, это было бы не идеально. Я не хочу указывать число, достигнутое первым списком в селекторе ol.continue.
Что я делаю неправильно? Какая минимальная комбинация HTML/CSS необходима для достижения желаемого эффекта?
Спасибо заранее...:)
Решение, которое я наконец принял
Вот код HTML и CSS, который я наконец использовал. Спасибо Феликсу за то, что вы меня туда. Следует также упомянуть, что Ли предлагает интересную альтернативу jQuery.
<html>
<head>
<style type="text/css">
ol.split { list-style-type: none; }
ol.split li:before
{
counter-increment: mycounter;
content: counter(mycounter) ".\00A0\00A0";
}
ol.split li
{
text-indent: -1.3em;
}
ol.start { counter-reset: mycounter; }
</style>
</head>
<body>
<ol class="split start">
<li>You can't touch this</li>
<li>You can't touch this</li>
</ol>
<p>STOP! Hammer time.</p>
<ol class="split">
<li>You can't touch this</li>
</ol>
</body>
</html>
Предостережение: выясняется, что это "решение" не работает в представлении совместимости IE8 (и, возможно, с другими версиями/браузерами). Если это тебя не беспокоит, отлично.:)
