规范化 css 防止单个 li 的样式

Posted 2023-03-13

【中文标题】规范化 css 防止单个 li 的样式

【英文标题】：normalize css prevents style for single li

【发布时间】：2013-05-29 03:06:18

【问题描述】：

我正在使用 css 重置，但有一个列表我想要一个列表样式类型。我该怎么做，规范化总是在重置我的样式。

js fiddel code

在 css 的末尾，我尝试按类设置列表的样式，但不起作用。

html

    <ul class="disc">
                        <li>You can draw!</li>
                        <li>You can drag&drop Images!</li>
                        <li>You can add text labels!</li>
                    </ul>

css

.disc:li
    list-style-type: disc;


.disc:ul
    list-style-type: disc;

【参考方案1】：

您还需要恢复原始填充以显示这些标记。例如：

ul.disc 
    list-style: disc;
    padding-left: 40px;

Fiddle.

此规则的应用与 reset 规则在其上方或下方应用无关，因为它比 specific（元素选择器 + 类）更多 reset （从没有类，只有元素选择器 + 属性）选择器）。

【参考方案2】：

您使用了无效的 CSS。 您应该只使用以下内容：

ul.disc  
  list-style: disc;

【参考方案3】：

您需要覆盖重置。您的代码中有错误。应该是这个

.disc li
    list-style-type: disc;

或者这个

.disc 
    list-style-type: disc;

（您可能不需要两者，但这取决于重置。）

如果上述方法不起作用，则规则需要更具体，例如添加一个额外的类或此列表出现的容器的 ID。