CSS中的自定义OL标签

Question

我希望用inline css在html中进行自定义。我希望它以这种格式

（1）text1

（2）text2

（3）文本3

我想做的是

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

但根本无法工作。

Answer 1

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

请参阅使用CSS：之前和：使用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>

或

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>

或

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