Is there any way to make numbers in ordered list b

Is there any CSS selector to attach some style to the numerical part of an ordered list only?

I have HTML like:

<ol>
   <li>a</li>
   <li>b</li>
   <li>c</li>
</ol>

Which should output:

1.a
2.b
3.c

I need to make 1., 2. and 3. bold, while leaving a,b,c regular.

I am aware of the  workaround...

标签： css html-lists

7条回答

Evening l夕情丶

2楼-- · 2019-03-08 00:44

About a year later, but as this might be also interesting for others coming to here in the future:

Another easy possibility would be to wrap the list item content into a , style the <li> as bold and the  as regular. This would be also preferable from an IA point of view, especially when <li>s can contain sub-lists (to avoid mixing text nodes with block level elements).

Full example for your convenience:

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

If you prefer a more generic approach (that would also cover other scenarios like <li>s with descendants other than , you might want to use li > * instead of 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>

(Check the list item 4 here which is ol/li/code and not ol/li/p/code here. Just make sure to use the selector li > * and not li *, if you only want to style block level descendants as regular, but not also inlines like "foo bold word foo."

0人赞添加讨论(0) 举报

萌系小妹纸

3楼-- · 2019-03-08 00:45

The previous answer has a side effect that turns all types of lists numeric. <ol type="a"> will show 1. 2. 3. 4. rather than a. b. c. d.

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

The above code adds support for lowercase letters, lowercase roman numerals. At the time of writing browsers do not differentiate between upper and lower case selectors for type so you can only pick uppercase or lowercase for your alternate ol types I guess.

0人赞添加讨论(0) 举报

一夜七次

4楼-- · 2019-03-08 00:57

JSFiddle:

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

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

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

5楼-- · 2019-03-08 00:57

If you are using 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>

0人赞添加讨论(0) 举报

放荡不羁爱自由

6楼-- · 2019-03-08 00:58

i had a similar issue while writing a newsletter. so I had to inline the style this way:

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

0人赞添加讨论(0) 举报

ら.Afraid

7楼-- · 2019-03-08 01:05

This is an update for dcodesmith's answer https://stackoverflow.com/a/21369918/1668200

The proposed solution also works when the text is longer (i.e. the lines need to wrap): Updated Fiddle

When you're using a grid system, you might need to do one of the following (at least this is true for Foundation 6 - couldn't reproduce it in the Fiddle):

Add box-sizing:content-box; to the list or its container
OR change text-indent:-2em; to -1.5em

P.S.: I wanted to add this as an edit to the original answer, but it was rejected.

0人赞添加讨论(0) 举报

1 2 下一页

Is there any way to make numbers in ordered list b

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间