Есть ли какой-либо CSS-селектор для прикрепления некоторого стиля к числовой части только упорядоченного списка?
У меня есть HTML как:
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
Что должно выводиться:
1.a
2.b
3.c
Мне нужно сделать 1., 2. и 3. жирным, оставив a, b, c регулярными.
Мне известно об обходном пути <span>...
CSS
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}
Примерно через год, но поскольку это может быть интересно также для других, приезжающих сюда в будущем:
Еще одна простая возможность - обернуть содержимое элемента списка в <p>, стиль <li>, как жирный, и <p> как обычный. Это также было бы предпочтительнее с точки зрения IA, особенно когда <li> может содержать под-списки (чтобы избежать смешения текстовых узлов с элементами уровня блока).
Полный пример для вашего удобства:
<html>
<head>
<title>Ordered list items with bold numbers</title>
<style>
ol li {
font-weight:bold;
}
li > p {
font-weight:normal;
}
</style>
</head>
<body>
<ol>
<li>
<p>List Item 1</p>
</li>
<li>
<p>Liste Item 2</p>
<ol>
<li>
<p>Sub List Item 1</p>
</li>
<li>
<p>Sub List Item 2</p>
</li>
</ol>
</li>
<li>
<p>List Item 3.</p>
</li>
</ol>
</body>
</html>
Если вы предпочитаете более общий подход (который также будет охватывать другие сценарии, такие как <li> с потомками, отличными от <p>, вы можете использовать li > * вместо li > p:
<html>
<head>
<title>Ordered list items with bold numbers</title>
<style>
ol li {
font-weight:bold;
}
li > * {
font-weight:normal;
}
</style>
</head>
<body>
<ol>
<li>
<p>List Item 1</p>
</li>
<li>
<p>Liste Item 2</p>
<ol>
<li>
<p>Sub List Item 1</p>
</li>
<li>
<p>Sub List Item 2</p>
</li>
</ol>
</li>
<li>
<p>List Item 3.</p>
</li>
<li>
<code>List Item 4.</code>
</li>
</ol>
</body>
</html>
(Проверьте здесь элемент списка 4, который является ol/li/code, а не ol/li/p/code здесь.
Просто убедитесь, что вы используете селектор li > *, а не li *, если вы хотите, чтобы потомки уровня блочного стиля были регулярными, но не были также такими строками, как "foo <strong> жирным словом </strong> foo."
ol {
counter-reset: item;
}
ol li { display: block }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
font-weight: bold;
}
У меня была аналогичная проблема при написании информационного бюллетеня. поэтому мне пришлось встроить стиль таким образом:
<ol>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
</ol>
Это обновление для ответа dcodesmith fooobar.com/questions/118037/...
Предлагаемое решение также работает, когда текст длиннее (т.е. строки необходимо обернуть): Обновлено Fiddle
Когда вы используете сетку, вам может потребоваться выполнить одно из следующих действий (по крайней мере, это верно для Foundation 6 - не удалось воспроизвести ее в Fiddle):
box-sizing:content-box; в список или его контейнерtext-indent:-2em; на -1.5emP.S.: Я хотел добавить это как отредактировать исходный ответ, но он был отклонен.
Если вы используете Bootstrap 4:
<ol class="font-weight-bold">
<li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
<li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
</ol>
Предыдущий ответ имеет побочный эффект, который превращает все типы списков в числовые. <ol type="a"> покажет 1. 2. 3. 4. вместо abcd
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}
/* Add support for non-numeric lists */
ol[type="a"] > li:before {
content: counter(item, lower-alpha) ".";
}
ol[type="i"] > li:before {
content: counter(item, lower-roman) ".";
}
Приведенный выше код добавляет поддержку строчных букв, строчных римских цифр. Во время написания браузера браузеры не различают верхний и нижний регистр селекторов типа, так что вы можете выбрать только верхний или нижний регистр для своих альтернативных типов.
В уровень псевдоэлементов CSS 4a добавлен новый селектор псевдоэлементов ::marker, который упрощает выделение номеров элементов списка жирным шрифтом, например
ol > li::marker {
font-weight: bold;
}
К сожалению, в настоящее время он поддерживается только Firefox 68 и выше. (См. Chrome Bug 457718, чтобы узнать статус Chrome/Blink.)
Я знаю, что это старый, но есть и "быстрый и грязный" способ вообще не использовать <li>:
<!-- <ul> is used for indentation only -->
<ul>
<p> <b>1.</b> item text </p>
<p> <b>2.</b> item text </p>
</ul>
Вы также можете поставить вокруг a, b, c и затем выделить ul в css.
Пример
ul {
font-weight:bold;
}
<ul><li><span style="font-weight:normal">a</span></li></ul>
Довольно поздний ответ, но, надеюсь, кто-то найдет это полезным
У меня была такая ситуация:
Элемент списка
а. Элемент списка
Если первым элементом был <strong>, то подэлементом был нормальный вес и "1". просто не будет смелым.
Мое решение было через JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($('ol').has('li').has('strong')) {
$('ol ').css('font-weight', 'bold');
$('ol > li > ol').css('font-weight', 'normal');
}
});
</script>
Надеюсь, это кому-нибудь поможет!