Question

我已经在每个项目之前为<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声明已被正确覆盖之前，我的工作非常相似。我究竟做错了什么？或者，更重要的是，如何使它正常工作？

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 */
}

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>

希望这会有所帮助！

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

2 个答案: