为什么 CSS 规则不适用于真实的 HTML 页面，但适用于 JSFiddle？ [关闭]答案

【问题标题】：Why the CSS rule does not apply on real HTML page but does on JSFiddle? [closed]为什么 CSS 规则不适用于真实的 HTML 页面，但适用于 JSFiddle？ [关闭]
【发布时间】：2021-11-21 01:19:24
【问题描述】：

在我的网站中，我编写了以下 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/中，当点击“Features”选项卡，并选择其中一个列表项时，我使用DevTools检查元素，但找不到规则.holder-features ul li：在应用之前。

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

为什么？

【问题讨论】：

你想完成什么？
@AdrianKokot 为 LI 添加复选标记。它不在实际网站中，而是在具有相同 CSS 的 jsfiddle 中
你可以简化：list-style-type: "✓";

标签： html css pseudo-element

【解决方案1】：

要修改lis 的外观，您可以在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>

【讨论】：

或更简单的：list-style-type: "✓";

【解决方案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 与您预期的一样

【讨论】：

【解决方案3】：

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

所以在删除整个块之后，规则就起作用了

【讨论】：