Question

情况是主题附带的样式表之一有ol { list-style: decimal; }。但是，对于此特定页面，我希望它使用type元素的ol属性定义的样式。

例如

<ol type='a'>
  <li>first</li>
  <li>Second</li>
</ol>

或

<ol type='i'>
  <li>first</li>
  <li>Second</li>
</ol>

我尝试了ol { list-style: initial}和ol { list-style: inherit}，但没有运气。

有人可以给我一种方法来使用CSS重置应用的样式吗？

Answer 1

当全局在用户样式中定义CSS属性时，由于计算CSS specificity的方式，您无法从HTML属性更改此样式。

list-style-type：initial 也不起作用，它用于重置为浏览器，而不是主题默认值。

所以你必须编写自己的，更具体的CSS。对于此用例，您可以使用attribute selectors。

然后结果将是这样的：

HTML

 <ol type='a'>
   <li>first</li>
   <li>Second</li>
 </ol>
 <ol type='i'>
   <li>first</li>
   <li>Second</li>
 </ol>

CSS

/* Theme defined stylse */
ol {
  list-style: decimal;
}

/* Your page defined list */
ol[type='a'] {
  list-style-type: lower-alpha;
}
ol[type='i'] {
  list-style-type: lower-roman;
}

您可以在codepen（codepen.io/Xopoc/pen/yPQBEM）

中使用此代码

Answer 2

在HTML4中不推荐使用type属性，并在HTML5 [1]中重新引入。除非在法律文件中，否则不应该使用它。理想情况下，您可以在CSS中覆盖它。但是，您可以通过在每个li [2]上添加不同的类型来覆盖有序列表的type属性：

<ol type='i'>
  <li type="a">first</li>
  <li type="a">Second</li>
</ol>

就你的例子而言，这是一个显示这种技术的小提琴：

https://css-tricks.com/debouncing-throttling-explained-examples/

参考资源：

如何使OL覆盖为分配类型属性而分配的列表样式

2 个答案:

HTML

CSS