0

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

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=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    </ol>
    </li>
    
        
    <h3><li>BBBB</h3>
    <ol>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    </ol>
    </li>
    
    <h3><li>CCCC</h3>
    <ol>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    </ol>
    </li>
    
    </ol>
    </div>

4

3 回答 3

4

您的“顶级”列表元素格式不正确。<li> 属性应该在 <h3> 属性之外。看看这支笔：http ://codepen.io/anon/pen/jqPrWb

<body>
<div id="test">

    <ol>

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


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

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

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

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

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

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

于 2016-03-02T13:35:17.543 回答
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=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    </ol>
    </li>
    
        
    <li><h3>BBBB</h3>
    <ol>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    </ol>
    </li>
    
    <li><h3>CCCC</h3>
    <ol>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    <li><a href=”#”&gt;Lorem ipsum.</a></li>
    </ol>
    </li>
    
    </ol>
    </div>

于 2016-03-02T13:42:18.920 回答
2

正如其他两个答案中已经指出的那样，结构是错误的（无效），因为您将 ah3直接放在 a 中ol，然后li在h3. 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=”#”&gt;Lorem ipsum.</a>
        </li>
        <li><a href=”#”&gt;Lorem ipsum.</a>
        </li>
        <li><a href=”#”&gt;Lorem ipsum.</a>
        </li>
      </ol>
    </li>
    <li>
      <h3>BBBB</h3>
      <ol>
        <li><a href=”#”&gt;Lorem ipsum.</a>
        </li>
        <li><a href=”#”&gt;Lorem ipsum.</a>
        </li>
        <li><a href=”#”&gt;Lorem ipsum.</a>
        </li>
      </ol>
    </li>
    <li>
      <h3>CCCC</h3>
      <ol>
        <li><a href=”#”&gt;Lorem ipsum.</a>
        </li>
        <li><a href=”#”&gt;Lorem ipsum.</a>
        </li>
        <li><a href=”#”&gt;Lorem ipsum.</a>
        </li>
      </ol>
    </li>
  </ol>
</div>

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

于 2016-03-02T13:54:51.147 回答