为什么 CSS 规则不适用于真正的 HTML 页面，但适用于 JSFiddle？

Question

在我的网站中，我编写了以下 CSS 规则：

.holder-features ul li:before {
  content: "";
  background-image: url(/image/icons/check.svg);
  display: block;
  width: 10px;
  height: 10px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

然后在网页 http://www.sybase-recovery.com/outlook-repair/ 中，当单击“功能”选项卡和 select 列表项之一时，我使用 DevTools 检查元素，但找不到规则 .holder-features ul li:before 已应用。

然后我将清单和CSS代码复制到JSFiddle，然后简化清单代码，然后重试，但发现CSS规则确实适用。参见 https://jsfiddle.net/alanccw/9oucLfrx/10/

为什么？

Answer 1

要修改 li 的外观，您可以在 ul 元素上使用 list-style-image。:

.holder-features ul {
    list-style-image: url("https://www.datanumen.com/temp/check.svg?");
}

<div class="tab-content holder-features selected"
    data-tab="2">
    <section class="wrapper">
        <h2 style="text-align: center;">Main Features</h2>

        <hr>

        <ul>
            <li>Support 32bit and 64bit.</li>
            <li>Support for Windows 95/98/ME/NT/2000/XP/Visa/7/8/8.1/10 and Windows Server 2003/2008/2012/2016/2019.
                Both
                32bit and 64bit operating systems are supported.</li>
        </ul>
        <hr>
    </section>
</div>

Answer 2

该问题是由于您在单个 css 中多次评论的拼写错误导致了错误

考虑改成

/*
.holder-features ul li:before {
    display: none;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    content: url("/images/icons/check.svg");
}
*/

更改此设置后，您将看到您预期的 :before

Answer 3

检查您的 css 代码后，发现评论违反了规则（第 2345 行至 2447 行）

所以删除整个块后，规则有效

为什么 CSS 规则不适用于真正的 HTML 页面，但适用于 JSFiddle？

Why the CSS rule does not apply on real HTML page but does on JSFiddle?

html

css

pseudo-element