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

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

您的 "top-level" 列表元素格式不正确。

属性应该在

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

这将设置

Answer 2

您的标题 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>

Answer 3

正如其他两个答案中已经指出的那样，结构错误（无效），因为您将 h3 直接放在 ol 中，然后在 li 中添加了 li h3。 ol 只能有 li 作为直接 children，因此将 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>

(添加为单独的答案，因为现有答案没有完全涵盖您的问题)

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

How to properly apply CSS style to H elements in ordered list

css

counter

list

css-counter