html - 将 ol 和 li 的 css 样式应用于 html 中的不同部分-6ren

html - 将 ol 和 li 的 css 样式应用于 html 中的不同部分

转载作者：太空宇宙更新时间：2023-11-03 20:34:44

我需要申请多个 <ol>和 <li> HTML 文件中不同部分的样式。我创建了一个类名 .itemListing在 STYLE 部分并在 div 中指定该类。但它不适用。我只想在一个部分中应用此 itemListing 样式。

有什么建议吗？

这是 HTML 的一部分:

<HEAD>
    <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
    <TITLE></TITLE>
    <STYLE TYPE="text/css">
    .itemListing
    {
        ol {
                counter-reset: item;
                margin-left: 0;
                padding-left: 0;
            }
        li {
            display: block;
            margin-bottom: .5em;
            margin-left: 2em;
        }
        li:before {
            display: inline-block;
            content: "Item "counter(item) ": ";
            counter-increment: item;
            width: 7em;
            margin-left: -2em;
        }
    }
    </STYLE>
</HEAD>
<BODY LANG="en-US" DIR="LTR">

<div class="itemListing">
<FONT COLOR="#0000ff">There are two items:</FONT><BR>
<ol>
<li> This is one item listing.</li>
<li> This is another item listing.</li>
</ol>
</div>
<BR>

<FONT COLOR="#0000ff">This is a different listing:</FONT><BR>
<ol type="A">
<li>&nbsp;This item listing will have different format. </li>
<BR>
</ol>

最佳答案

你应该这样定义你的样式

.itemListing ol {
            counter-reset: item;
            margin-left: 0;
            padding-left: 0;
        }
    .itemListing li {
        display: block;
        margin-bottom: .5em;
        margin-left: 2em;
    }
    .itemListing li:before {
        display: inline-block;
        content: "Item "counter(item) ": ";
        counter-increment: item;
        width: 7em;
        margin-left: -2em;
    }