css - 为什么伪元素内容不被更具体的声明所取代？

Question

我<ul>在每个项目之前都设置了伪元素图标。Font Awesome 的复选标记图标设置为 every 的默认值<li>，但我想根据它们的 ID（或类。这似乎也不起作用）为某些项目使用特定图标。但是特定的图标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声明被正确覆盖。我究竟做错了什么？或者，更重要的是，我如何让它正常工作？

标签： cssfont-awesome

Answer 1

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

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