Question

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

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>

Answer 1

您的＆＃34;顶级＆＃34;格式不正确列表元素。＆lt; li>属性应该在外面＆lt; h3＆gt;属性。看看这支笔：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：之前...查看新笔http://codepen.io/anon/pen/jqPrWb

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

这将设置＆lt;中所有数字的字体大小。 ol＆gt; ...使用类，您可以在列表的特定级别设置它！

Answer 2

您的标题3应嵌套在列表项标签中。

＆＃13;

#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 li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

#test h3:before {
  content: counters(item, ".") " ";
  counter-increment: item
}


#test ol {
  counter-reset: item;
  margin: 0
}

#test li>h3 {
  font-size: 26px;
}

＆＃13;

    <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>

＆＃13;

Answer 3

正如在其他两个答案中已经指出的那样，结构错误（无效），因为您已将h3直接放在ol内，然后在{{{}内添加了li 1}}。 h3只能ol作为直接子项，因此请将li移至h3内，并对您的CSS进行以下更改。

增加li处的计数器，而不是将其递增为#test li。这样做的原因是让计数器的继承和范围不受额外元素的影响。
将计数器的值添加到#test li:before元素（这将在标题旁边添加数字，并将#test li h3:before的样式应用于该数字）。然后我们还需要在第二级h3显示数字，因此也要将计数器显示添加到li。

#test li li:before

#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 {
  counter-increment: item
}
#test li h3:before,
#test li li:before {
  content: counters(item, ".")" ";
}
#test ol {
  counter-reset: item;
  margin: 0
}
#test li > h3 {
  font-size: 26px;
}

（作为单独答案添加，因为现有答案未完全涵盖您的问题）

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

3 个答案: