为什么伪元素内容没有被更具体的声明所取代？

Question

我已经 <ul> 在每个项目前设置了伪元素图标。 Font Awesome 的复选标记图标设置为每个 <li> 的默认图标，但我想根据它们的 ID（或 class）为某些项目使用特定图标。这似乎也不起作用。但是特定图标 content 声明似乎并没有覆盖默认图标，即使选择器应该更具体。这是一个简单的例子：

.cvt-product-tags li:before {
    content: '\f00c'; /* Default checkmark icon */
    font-family: 'Font Awesome 5 Pro';
}
      /* Custom per-li icons */
      .cvt-product-tags li#1394:before {
        content: '\f21a'!important; /* Custom boat icon */
      }
      .cvt-product-tags li#1384:before {
        content: '\f207'!important; /* Custom bus icon */
    }

我在这里设置了一个更完整的笔：https://codepen.io/dimedici/pen/PowGbdv。

令人困惑的是，在某些标记更改之前我有一些非常相似的工作，其中 content 声明被正确覆盖。我究竟做错了什么？或者，更重要的是，我如何让它正常工作？

Answer 1

CSS 以数字开头的选择器必须以特殊方式处理。

.cvt-product-tags li[id='1394']:before {
    content: '\f21a'!important; /* Custom boat icon */
}
 /* The space is important */
.cvt-product-tags li# 394:before {
    content: '\f21a'!important; /* Custom boat icon */
}

Answer 2

您使用 integer 为 ID 创建了问题。您必须将 id 名称 integer 更改为 string。即：#1394 到 #boat-1394。如果您想将 integer 用于 ID 或 Class，则必须以不同的样式编写 CSS。即：[id="1394"] 或 [class="1394"].

检查下面的代码段。

.container {
  width:26em;
  font-family: sans-serif;
}
.cvt-product-tags {
 -webkit-columns: 2 10em;
 -moz-columns: 2 10em;
 columns: 2 10em;
 -webkit-column-gap: 2em;
 -moz-column-gap: 2em;
 column-gap: 2em;
 margin: 1em 0;
  padding-left:2.1em;
  list-style-type: none;
}
.cvt-product-tags li {
 margin-bottom: .75em;
 line-height: 1.2em;
}
.cvt-product-tags li:before {
 content: '\f00c'; /* Default checkmark icon */
 font-family: 'Font Awesome 5 Pro';
 color: #fff;
 font-size: 0.75em;
 line-height: 2;
 text-align: center;
 background: #b84542;
 display: inline-block;
 margin: 0 0.8em 0 -2.8em;
 width: 2em;
 border-radius: 50%;
}
  /* Custom per-tag icons */
   /* Boat Tour */
   .cvt-product-tags li#boat-1394:before {
    content: '\f21a'!important;
   }
   /* Bus Tour */
   .cvt-product-tags li[id="1384"]:before {
    content: '\f207'!important;
    }
    /* Family Friendly */
    .cvt-product-tags li[id="1377"]:before {
      content: '\f1ae'!important;
    }
    /* Helicopter Tour */
    .cvt-product-tags li[id="1385"]:before {
      content: '\f533'!important;
    }
    /* Meals Included */
    .cvt-product-tags li[id="1378"]:before {
      content: '\f2e7'!important;
    }
    /* Money-back Guarantee */
    .cvt-product-tags li[id="1383"]:before {
      content: '\f53a'!important;
    }

<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet"/>
<div class="container">
  <ul class="cvt-product-tags">
    <li id="boat-1394"><a href="/experience-tag/boat-tour/">Boat Tour</a></li>
    <li id="1384"><a href="/experience-tag/bus-tour/">Bus Tour</a></li>
    <li id="1377"><a href="/experience-tag/family-friendly/">Family-Friendly</a></li>
    <li id="1385"><a href="/experience-tag/helicopter-tour/">Helicopter Tour</a></li>
    <li id="1383"><a href="/experience-tag/money-back-guarantee/">Money-back Guarantee</a></li>
  </ul>
</div>

希望这会有所帮助！

为什么伪元素内容没有被更具体的声明所取代？

Why isn't pseudo-element content being replaced by more specific declarations?

css

font-awesome