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

Question

在我的沙盒中：

.thunderbolt li:nth-child(1):before {content: "A1  ";}
.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: "85";}

<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 字符替换项目符号点。相反，字符只是 与要点 一起显示，in-line 与文本一起显示。

此外，我不希望 .thunderbolt class 应用于嵌套 <ul>--我只是希望它成为一个标准的要点。

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

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

中的第 4 个 child

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

Answer 1

回答1：如果你使用unicode而不是bullets，你将需要使用，

.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: "A1   ";
  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 上做的，它有一个内置的样式 sheet（我不想备份、编辑然后重新上传），所以我不得不添加 !important在我的更改之后，以便他们申请。
- 示例：
- list-stye: "A1 "!important;
- list-style-position: outside!important;
CSS 仍然将嵌套的 <li> 视为 nth-child(4)，因此我不得不在父列表中的 nth-child(n) 编号中跳过它。（注意我做 nth-child(3) 然后跳到 nth-child(5)。）

Credit

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

Replace bullet points with emojis (or other Unicode characters) (But Don't change nested bullets)

css

unicode

html-lists

emoji