CSS覆盖列表样式

Question

我在我的Rails应用程序中有一个名为reset.css的文件，其中包含以下代码：

ul, ol, li { list-style: none; }

但我不想在某些页面上使用它，我希望保留默认的CSS样式。

如何设置默认值呢？

这是我的带列表的

标签。

 <div class="text_blog">
    <ol>
     <li>1</li>
     <li>2</li>
     <li>3</li>
    </ol>
   </div>

这可以是ol或者ul列表。

- user

---

你是指想在其他页面上使用“_默认 CSS_”，但在“_这个特定页面_”上您想设置其他的 CSS 值吗？ - Angel ofDemons

我想为这个页面/ div 使用默认的CSS样式，但其他的应该使用“reset.css”。 - user

Answer 1

您确定要重置样式吗？我想您应该只针对特定的HTML元素进行操作！

我的意思是，不要针对所有的列表(ul, ol)进行操作，而是只针对您想要删除列表样式的那些元素进行操作！

在您的代码中，那些需要操作的元素位于类.text_blog中。

您的HTML应该如下所示：

 <div class="text_blog">
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
 </div>

 <div>
   <ol>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ol>
 </div>

你的CSS代码：

.text_blog ol {
    list-style: none;
}

请注意，第一个

具有类.text_blog，因此CSS仅针对该特定

进行目标设置。

示例：https://jsfiddle.net/r1xefz1q/ 编辑：如果您想要针对列表元素进行目标设置，而不是

，请将类属性移动到列表元素中。将类属性应用于所有要覆盖样式的列表！

这样就可以在不同的列表上工作了！

如果这意味着您必须浏览所有列表并更新它们的类，则为了保持代码可读性和易理解性，我建议您执行此操作！ :)

HTML:

 <div class="text_blog">
  <ol class="customListStyle">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>

  <ul class="customListStyle">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

<div>
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

CSS：

.customListStyle {
    list-style: none;
}

新的代码片段：https://jsfiddle.net/r1xefz1q/1/

。

- chrisv

---

你确定要重置样式吗？- 我不想 :) 但是这是一个大型应用程序，所以我只需要修复其中的一小部分。 - user

因此，您应该使用一个类，并将类属性添加到您想要更改样式的列表中。如果您不想针对DIV进行操作，而是仅针对列表：请将类属性添加到列表元素而不是div元素！查看编辑后的答案！ :) - chrisv

Answer 2

我尝试了一切，但似乎发现如果从原始内容中删除 ul, li 并在 initial 上放置一个 .text-blog ol，它就“有点”可行。祝好运！

.text_blog ol {
    list-style: initial;
}
ol {
  list-style:none;
}

 <div class="text_blog">
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
 </div>

 <div class="second">
   <ol>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ol>
 </div>

- Angel ofDemons

Answer 3

您可以使用list-style CSS属性来设置默认样式。

.text_blog ol {
    list-style-type: numeric;
}

<div class="text_blog">
    <ol>
       <li>1</li>
       <li>2</li>
       <li>3</li>
    </ol>
</div>

- Mohammad Usman