发表新帖
发表新帖

How to colour the list-style-type auto-generated numbers?

前端 未结
关注
9 1218
遥遥无期
遥遥无期 2020-12-05 07:03

I\'m using the following list:

    
    
  1. This is the first footnote...
    2. 
    &
相关标签:
9条回答
  • 遇见更好的自我
    2020-12-05 07:58

    Well, the kicker is that the numbers are technically generated inside the <li>, so anything you do to the <li> will affect the number. From the spec:

    "Most block-level elements in CSS generate one principal block box. In this section, we discuss two CSS mechanisms that cause an element to generate two boxes: one principal block box (for the element's content) and one separate marker box (for decoration such as a bullet, image, or number)."

    Notice that both the marker box and the principal box belong to the same element - in this case, the list item. Accordingly, we should expect all <li> styling to apply to both the marker and the content. This is also not surprising if you think about it as though the list item itself is generating the numbering content (which effectively it is doing in CSS terms). This is confirmed later on when the spec continues:

    "The list properties allow basic visual formatting of lists. As with more general markers, a element with 'display: list-item' generates a principal box for the element's content and an optional marker box. The other list properties allow authors to specify the marker type (image, glyph, or number) and its position with respect to the principal box (outside it or within it before content). They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box."

    So because the marker belongs to the list, it is affected by the <li> styling and isn't adjustable directly. The only way to achieve a different styling for the marker is to insert a <span> inside the list item, and style the span with the properties you want to be different from the marker.

    0 讨论(0)
  • 误落风尘
    2020-12-05 07:59

    How about this?

    <head>
  <style>
    #footnotes li { color: #f90; }
    #footnotes li a { color: #000; }
  </style>
</head>
<body>
  <ol id="footnotes">
    <li><a name="footnote1">This is the first footnote...</a></li>
    <li><a name="footnote2">This is the second footnote...</a></li>
  </ol>
</body>
    0 讨论(0)
  • 陌清茗
    2020-12-05 07:59

    These days you can just use ::marker;

    Example:

    li::marker {
  color: #f90;
}

    More here, including the browser compat table: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#Browser_compatibility

    0 讨论(0)
 看不清?
提交回复
热议问题