为什么伪元素内容不被更具体的声明代替？

Posted 2023-01-13

我已经在每个项目之前用伪元素图标设置了此<ul>。 Font Awesome的复选标记图标设置为每个<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声明被正确覆盖）之前，我有非常相似的工作。我究竟做错了什么？或者，更重要的是，如何使它正常工作？

答案

None

另一答案

None