用表情符号（或其他Unicode字符）替换项目符号点（但不要更改嵌套的项目符号）

Question

在我的沙箱中：

.thunderbolt li:nth-child(1):before {content: "\26A1  ";}
.thunderbolt li:nth-child(2):before {content: "🔁 ";}
.thunderbolt li:nth-child(3):before {content: "🏃 ";}
.thunderbolt li:nth-child(4):before {content: "🕔 ";}
.thunderbolt li:nth-child(5):before {content: "🚫 ";}
.thunderbolt li:nth-child(6):before {content: "\2685";}

<div>
<ul class="thunderbolt">
<li>ThunderBolt devices only get recognized by BootCamp on boot.</li>
<li>If you unplug your ThunderBolt device while using Windows, you'll have to shut down then reboot your OS to get it recognized again.</li>
<li>Disable <b>Fast Startup </b>in Windows 8/10.</li>
<ul>
<li>Also try holding <b>Shift </b>when you click&nbsp;<b>Start </b>&gt; <b>Shut down</b>.</li>
</ul>
<li>Wait a solid chunk of seconds on the login screen after boot to allow BootCamp to configure Thunderbolt devices.</li>
<li><b>Sleep&nbsp;</b>simply does not work in BootCamp with a ThunderBolt device connected.</li>
</ul>
</div>

http://www.cssdesk.com/M6Cyz

我希望Unicode字符替换要点。而是，这些字符只是显示alongside要点，与文本一致。

而且，我不想将.thunderbolt类应用于嵌套的<ul>，我只是希望将其作为标准的要点。

我已经尝试过.thunderbolt list-style: none，但所做的只是使我的霹雳符号消失了。

[此外，显示的结果网页会跳过第四个孩子的.thunderbolt li:nth-child(4):before {content: "🕔 ";}中的字符，而是显示.thunderbolt li:nth-child(5):before {content: "🚫 ";}中的字符。似乎代码将一个嵌套的<li>当作父<ul>中的第四个孩子对待。

---

1. 我如何替换 <ul>中带有unicode字符的要点？
2. [在应用<ul>属性时，如何告诉CSS跳过嵌套的nth-child(n)？

Answer 1

答案1：如果使用unicode代替项目符号，则需要使用，

.thunderbolt li: {
   position: relative;
   list-style: none;
   overflow: hidden;
}
.thunderbolt li:after {
   position: absolute;
   top: 50%;
   left: -2%;
   transform: transletX(-50%);
}

并且请使用您的unicode作为position: absolute;，希望您的代码是简单的解决方案。相同的css可以在所有li上正常工作，但单独更改content: 'here is your unicode';，我希望这将是实现unicode项而不是项目符号项的最简单方法。

答案2：如果您使用.thundebolt > li，那么我希望它仅在特定列表上有效。您可以尝试。

注意：如果您有更好的解决方案，请允许我，我想向您了解更多，谢谢！

Answer 2

ul.thunderbolt > li:nth-child(1) {
  list-style: "\26A1   ";
  list-style-position: outside;
}
ul.thunderbolt > li:nth-child(2) {
  margin-top: 10px;  
  list-style: "🔁  ";
  list-style-position: outside;
}
ul.thunderbolt > li:nth-child(3) {
  margin-top: 10px;
  list-style: "🚫  ";
  list-style-position: outside;
}
ul.thunderbolt > li:nth-child(5) {
  margin-top: 10px;
  list-style: "🕔  ";
  list-style-position: outside;
}
ul.thunderbolt > li:nth-child(6) {
  margin-top: 10px;
  list-style: "😴  ";
  list-style-position: outside;
}
ul.thunderbolt ul li {
  margin-top: 10px;
  list-style-type: circle;
}

<ul class="thunderbolt">
<li>ThunderBolt devices only get recognized by BootCamp on boot.</li>
<li>If you unplug your ThunderBolt device while using Windows, you'll have to shut down then reboot your OS to get it recognized again.</li>
<li>Disable <b>Fast Startup </b>in Windows 8/10.</li>
<ul>
<li>Also try holding <b>Shift </b>when you click&nbsp;<b>Start </b>&gt; <b>Shut down</b>.</li>
</ul>
<li>Wait a solid chunk of seconds on the login screen after boot to allow BootCamp to configure Thunderbolt devices.</li>
<li><b>Sleep&nbsp;</b>simply does not work in BootCamp with a ThunderBolt device connected.</li>
</ul>

• > li使样式更改仅影响父级列表中的元素。
• 我使用ul.class_name ul li将一个嵌套list-style-type项目的<li>更改为打开的circle而不是关闭的disc。
• 我在Blogspot中进行了此操作，它具有内置的样式表（我不想备份，编辑然后重新上传），所以我必须在更改后添加!important才能应用。
  • 示例：
  • list-stye: "\26A1 "!important;
  • list-style-position: outside!important;
• CSS仍将嵌套的<li>视为nth-child(4)，因此我不得不在父列表的nth-child(n)编号中跳过它。 （请注意，我先执行nth-child(3)，然后跳到nth-child(5)。）

Credit