Сделать элементы списка упорядоченных ABC жирным шрифтом - PullRequest
Новая
       10

Сделать элементы списка упорядоченных ABC жирным шрифтом

52 голосов
/ 14 мая 2009

У меня есть упорядоченный список html с типом, установленным в «A» 

<ol type="A">...</ol>

Таким образом, каждый элемент списка будет начинаться с A, B, C и т. Д.

Я бы хотел, чтобы буквы A, B, C были выделены жирным шрифтом. Я попытался установить font-weight: bold; через CSS, но это не сработало. Любые предложения о том, как это сделать?

Ответы [ 6 ]

81 голосов
/ 14 мая 2009

немного чит, но это работает:

HTML: 

<ol type="A" style="font-weight: bold;">
  <li><span>Text</span></li>
  <li><span>More text</span></li>
</ol>

CSS: 

li span { font-weight: normal; }
46 голосов
/ 20 января 2013

Как альтернативное и превосходное решение, вы можете использовать собственный счетчик в элементе before. Это не требует дополнительной разметки HTML. Сброс CSS должен использоваться рядом с ним или, по крайней мере, стиль должен быть удален из элемента ol (list-style-type: none, reset margin), иначе элемент будет иметь два счетчика. 

<ol>
    <li>First line</li>
    <li>Second line</li>
</ol>

CSS: 

ol {
    counter-reset: my-badass-counter;
}
ol li:before {
    content: counter(my-badass-counter, upper-alpha);
    counter-increment: my-badass-counter;
    margin-right: 5px;
    font-weight: bold;
}

Пример: http://jsfiddle.net/xpAMU/1/

8 голосов
/ 14 мая 2009

Вы уверены, что правильно применили стили, или нет другой таблицы стилей, мешающей вашим спискам? Я попробовал это: 

<ol type="A">
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
</ol>

Тогда в таблице стилей: 

ol {font-weight: bold;}
ol li span.label {font-weight:normal;}

И он выделил A, B, C и т.д., а не текст.

(протестировано в Opera 9.6, FF 3, Safari 3.2 и IE 7)

6 голосов
/ 03 августа 2015

Я знаю, что этот вопрос немного устарел, но он все еще стоит первым в большинстве поисковых запросов Google. Я хотел добавить решение, которое не требует редактирования таблицы стилей (в моем случае у меня не было доступа): 

<ol type="A">
  <li style="font-weight: bold;">
    <p><span style="font-weight: normal;">Text</span></p>
  </li>
  <li style="font-weight: bold;">
    <p><span style="font-weight: normal;">More text</span></p>
  </li>
</ol>
5 голосов
/ 27 апреля 2016

Вы также можете сделать что-то подобное: 

ol {
  font-weight: bold;
}

ol > li > * {
  font-weight: normal;
}

Таким образом, у вас нет атрибутов "стиля" в вашем HTML

0 голосов
/ 29 июня 2018

Вы также можете сделать что-то подобное:

<ol type="A" style="font-weight: bold;">

<li style="padding-bottom: 8px;">****</li>

Это простой код для начинающих.

Этот код был протестирован в "Mozilla, Chrome и Edge ..

...