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

标签 html css

我需要申请多个 <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;
    }

关于html - 将 ol 和 li 的 css 样式应用于 html 中的不同部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35157422/

相关文章:

php - 奇怪的 Twitter Bootstrap 行为

javascript - $.html 将脚本呈现为内容

html - 没有表格标签的表格结构,只有div

html - Google 字体名称中带有空格,在 HTML 中正确的引用方式是什么?

javascript - 如何设置输入:focus style programatically using JavaScript

html - 文本溢出 :ellipsis and Flexbox

javascript - 为什么联系表单电子邮件在某些字段中发送 "Value"而不是 "Name"?

html - 如何使用 Bootstrap 弹出通知?

css - LESS CSS - ID 和背景段落

html - 我需要将 div 最大宽度设置为设备宽度