html - 为什么 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/中，单击“Features”选项卡并选择其中一个列表项时，我使用 DevTools 检查元素，但找不到规则.holder-features ul li:before被应用。

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

为什么？

标签： htmlcsspseudo-element

Answer 1

该问题是由您在单个 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您所期望的