在我的沙箱中:
.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 <b>Start </b>> <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 </b>simply does not work in BootCamp with a ThunderBolt device connected.</li>
</ul>
</div>
我希望Unicode字符替换要点。而是,这些字符只是显示alongside要点,与文本一致。
而且,我不希望将.thunderbolt
类应用于嵌套的<ul>
,我只是希望将其作为标准的要点。
我已经尝试过.thunderbolt list-style: none
,但所做的只是使我的霹雳符号消失了。
[此外,显示的结果网页会跳过第四个孩子的.thunderbolt li:nth-child(4):before {content: "🕔 ";}
中的字符,而是显示.thunderbolt li:nth-child(5):before {content: "🚫 ";}
中的字符。似乎代码将一个嵌套的<li>
当作父<ul>
中的第四个孩子对待。
<ul>
中带有unicode字符的要点?<ul>
属性时,如何告诉CSS跳过嵌套的nth-child(n)
?答案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
,那么我希望它仅在特定列表上有效。您可以尝试。
注意:如果您有更好的解决方案,请允许我,我想向您了解更多,谢谢!
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 <b>Start </b>> <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 </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
。!important
才能应用。list-stye: "\26A1 "!important;
list-style-position: outside!important;
<li>
视为nth-child(4)
,因此我不得不在父列表的nth-child(n)
编号中跳过它。 (注意,我先执行nth-child(3)
,然后跳到nth-child(5)
。)