У меня есть заказанный список в HTML. Я хотел бы добавить моделирование только к числам (1,2,3...), а не к самим элементам списка.
Существует ли способ относиться к этим числам?
Спасибо!
CSS2 обеспечивает контроль над генерируемым содержимым, что позволит вам стилизовать автоматически генерируемое содержимое независимо от остальной части элемента с помощью псевдокласса :before
. Вот решение, которое отвечает критериям, указанным в ОП (цвет фона у перечислителя списка, но не у элемента).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { margin: 0; padding: 10px; }
ol {
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: block;
padding: 10px 0;
margin: 0 0 10px 0;
}
li:before {
content: counter(item);
/*
To generate punctuation after the number, just precede or follow with a string:
content: "Chapter " counter(item) " >> ";
To make nested counters (1, 1.1, 1.1.1, etc.), use:
content: counters(item, ".");
*/
counter-increment: item;
background-color: #ddd;
margin-right: 15px;
padding: 10px;
}
ol li ol { margin-bottom: -10px; padding-top: 10px; }
ol li ol li { margin: 10px 0 0 30px; }
</style>
</head>
<body>
<ol>
<li>Turtles</li>
<li>Lizards
<ol>
<li>Salamanders</li>
<li>Geckos</li>
</ol>
</li>
<li>Velociraptors</li>
</ol>
</body>
</html>
Да, вы просто задаете стиль для элемента ol
, а затем переопределяете стиль для элемента li
.
ol
{
color: blue;
font-style: italic;
}
ol li p
{
color: black;
font-style: normal;
}
с
<ol>
<li><p>Text</p></li>
<li><p>Text</p></li>
<li><p>Text</p></li>
</ol>
Вы можете изменить теги p
на
, если хотите, но если вы сохраните их как p
's you' Придется удалить поля и отступы.