Подтвердить что ты не робот

Есть ли способ сделать цифры в упорядоченном списке жирным шрифтом?

Есть ли какой-либо 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>...

4b9b3361

Ответ 1

Counter-increment

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) ".";
}

DEMO

Ответ 2

Примерно через год, но поскольку это может быть интересно также для других, приезжающих сюда в будущем:

Еще одна простая возможность - обернуть содержимое элемента списка в <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."

Ответ 3

JSFiddle:

ol {
    counter-reset: item;
}
ol li { display: block }

ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: bold;
}

Ответ 4

У меня была аналогичная проблема при написании информационного бюллетеня. поэтому мне пришлось встроить стиль таким образом:

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

Ответ 5

Это обновление для ответа dcodesmith fooobar.com/questions/118037/...

Предлагаемое решение также работает, когда текст длиннее (т.е. строки необходимо обернуть): Обновлено Fiddle

Когда вы используете сетку, вам может потребоваться выполнить одно из следующих действий (по крайней мере, это верно для Foundation 6 - не удалось воспроизвести ее в Fiddle):

  • Добавить box-sizing:content-box; в список или его контейнер
  • ИЛИ изменить text-indent:-2em; на -1.5em

P.S.: Я хотел добавить это как отредактировать исходный ответ, но он был отклонен.

Ответ 6

Если вы используете 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>

Ответ 7

Предыдущий ответ имеет побочный эффект, который превращает все типы списков в числовые. <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) ".";
}

Приведенный выше код добавляет поддержку строчных букв, строчных римских цифр. Во время написания браузера браузеры не различают верхний и нижний регистр селекторов типа, так что вы можете выбрать только верхний или нижний регистр для своих альтернативных типов.

Ответ 8

В уровень псевдоэлементов CSS 4a добавлен новый селектор псевдоэлементов ::marker, который упрощает выделение номеров элементов списка жирным шрифтом, например

ol > li::marker {
  font-weight: bold;
}

К сожалению, в настоящее время он поддерживается только Firefox 68 и выше. (См. Chrome Bug 457718, чтобы узнать статус Chrome/Blink.)

Ответ 9

Я знаю, что это старый, но есть и "быстрый и грязный" способ вообще не использовать <li>:

<!-- <ul> is used for indentation only -->
<ul>
    <p> <b>1.</b> item text </p>
    <p> <b>2.</b> item text </p>
</ul>

Ответ 10

Вы также можете поставить вокруг a, b, c и затем выделить ul в css.

Пример

ul {
font-weight:bold;
}

<ul><li><span style="font-weight:normal">a</span></li></ul>

Ответ 11

Довольно поздний ответ, но, надеюсь, кто-то найдет это полезным

У меня была такая ситуация:

  1. Элемент списка

    а. Элемент списка

Если первым элементом был <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>

Надеюсь, это кому-нибудь поможет!