用表情符号（或其他 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 字符替换项目符号点。相反，字符只是与项目符号一起显示，与文本一致。

另外，我不希望 .thunderbolt 类应用于嵌套的 <ul>--我只是希望这是一个标准的要点。

我试过.thunderbolt list-style: none，但所做的只是让我的雷电符号消失。

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

---

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

Answer 1

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 将嵌套<li> 项的list-style-type 更改为打开的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

Answer 2

答案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，那么我希望它仅适用于特定列表。你可以试试看。

注意：如果您有更好的解决方案，请告诉我，我想从您那里了解更多信息，谢谢！