Question

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

有什么建议吗？

以下是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>

Answer 1

你应该像这样定义你的风格

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

为html中的不同部分应用ol和li的css样式

1 个答案: