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

【问题标题】：How to properly apply CSS style to H elements in ordered list如何正确地将 CSS 样式应用于有序列表中的 H 元素
【发布时间】：2016-03-02 13:29:09
【问题描述】：

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

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>

【问题讨论】：

标签： css list counter css-counter

【解决方案1】：

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

属性应该在

属性之外。看看这支笔：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;
}

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

【讨论】：

但它不会将样式应用于<h3>之前的数字，这就是我在<li>之前使用<h3>的原因
看看我的新笔！ :) 使用 :before 属性可能会对您有所帮助！
我一直在等着看你的下一个更新伙伴，因为你的部分答案是正确的，但我继续添加我自己的答案，因为我觉得另一部分仍未完全回答。修改您的答案以包含我的版本感觉不舒服。但是我赞成解决问题的一个非常关键的部分:)
我猜是团队合作！重要的是帮助这个人！ :P

【解决方案2】：

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

增加#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;
}

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

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

【讨论】：

非常感谢您详细解释。这正是我想要的！

【解决方案3】：

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

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

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

【讨论】：

已编辑，以便将 h3 样式应用于 h3' elements that are children of li` 元素。