css - 如何使 OL 覆盖分配给它的列表样式以尊重类型属性

Question

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

例如

<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 属性在用户样式中全局定义时，您无法从 HTML 属性更改此样式，因为 CSS specificity被计算。

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 ) 中使用此代码