gpt4 book ai didi

css - 如何正确地将 CSS 样式应用于有序列表中的 H 元素

转载 作者:太空宇宙 更新时间:2023-11-03 19:49:47 24 4
gpt4 key购买 nike

我有这个小问题,我正在构建一个嵌套的有序列表,我希望能够自定义顶级元素的样式(请注意粗体在计数器和文本上都有)。

1. AAA

1.1 Lorem ipsum

1.2 Lorem ipsum

1.3 Lorem ipsum

2. BBB

2.1 Lorem ipsum

2.2 Lorem ipsum

2.3 Lorem ipsum

我遇到的问题是,如果我应用任何 <h>列表顶级元素的标记,计数器中断。

没有 <h3>标签计数器工作正常,但没有 <h3>我无法设置列表的顶级元素的样式。

我怎样才能同时获得工作计数器和样式化的顶级元素?

示例在这里:

#test li {
font-size: 16px;
padding: 2px 0;
display: block;
margin-left: 10px
}

#test h3 {
display: inline-block;
padding: 0 0 5px 0;
}

#test ol, ul {
list-style-type: decimal;
}

#test li:before {
content: counters(item, ".") " ";
counter-increment: item
}

#test ol {
counter-reset: item;
margin: 0
}

#test h3>li {
font-size: 26px;
}
    <div id="test">

<ol>

<h3><li>AAAA</h3>
<ol>
<li><a href=”#”>Lorem ipsum.</a></li>
<li><a href=”#”>Lorem ipsum.</a></li>
<li><a href=”#”>Lorem ipsum.</a></li>
</ol>
</li>


<h3><li>BBBB</h3>
<ol>
<li><a href=”#”>Lorem ipsum.</a></li>
<li><a href=”#”>Lorem ipsum.</a></li>
<li><a href=”#”>Lorem ipsum.</a></li>
</ol>
</li>

<h3><li>CCCC</h3>
<ol>
<li><a href=”#”>Lorem ipsum.</a></li>
<li><a href=”#”>Lorem ipsum.</a></li>
<li><a href=”#”>Lorem ipsum.</a></li>
</ol>
</li>

</ol>
</div>

最佳答案

您的“顶级”列表元素的格式不正确。

  • 属性应该在

    属性之外。查看这支笔:http://codepen.io/anon/pen/jqPrWb

    <body>
    <div id="test">

    <ol>

    <li>
    <h3>AAAA</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>


    <li>
    <h3>BBBB</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>

    <li>
    <h3>CCCC</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>

    </ol>
    </div>
    </body>

    编辑:使用 CSS :before... 查看新笔 http://codepen.io/anon/pen/jqPrWb

    ol :before{
    font-size: 40px;
    }

    这将设置

      中所有数字的字体大小...使用类,您可以在列表的特定级别设置它!

  • 关于css - 如何正确地将 CSS 样式应用于有序列表中的 H 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35748600/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com