在CSS中自定义ol标签

Question

我想用inline css在html中制作自定义ol .. 我希望它采用这种格式

  

（1）text1

     

（2）text2

     

（3）text 3

我的想法是

<ol style="counter-increment:section; content:(counter(section));">
<li>text1 </li>
<li>text2 </li>
<li>text3 </li>
</ol>

但它根本不起作用。

Answer 1

不，您不能为伪元素指定内联样式。

请参阅Using CSS :before and :after pseudo-elements with inline CSS?。

写为

<style>

ol {
  counter-reset: section1;
  list-style-type: none;
}

ol li {
  counter-increment: section1;
}

ol li:before {
  content: "(" counter(section1) ") ";
  
}
</style>


<ol>
  <li>text1 </li>
  <li>text2 </li>
  <li>text3 </li>
</ol>

OR

ol {
  counter-reset: section1;
  list-style-type: none;
}

ol li {
  counter-increment: section1;
}

ol li:before {
  content: "(" counter(section1) ") ";
  
}

<ol>
  <li>text1 </li>
  <li>text2 </li>
  <li>text3 </li>
</ol>

OR

<ol style="list-style-type: none;">
  <li>(1) text1 </li>
  <li>(2) text2 </li>
  <li>(3) text3 </li>
</ol>