nth-child Custom <ul>: заменить точку маркера символом Юникод и не применять к вложенному <ul>

В моей песочнице здесь:

.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

Я хочу, чтобы символы Юникода заменяли маркеры. Вместо этого символы просто появляются рядом с точками маркера, в соответствии с текстом.

Кроме того, я не хочу, .thunderbolt класс .thunderbolt применялся к вложенному <ul> я просто хочу, чтобы это было стандартным маркером.

Я попробовал .thunderbolt list-style: none кроме всего, что сделал, чтобы мой символ thunderbolt исчез.

Кроме того, отображаемая в результате веб-страница пропускает символ в .thunderbolt li:nth-child(4):before {content: "? ";} для 4-го дочернего .thunderbolt li:nth-child(5):before {content: "? ";} и отображает символ из .thunderbolt li:nth-child(5):before {content: "? ";} вместо этого. Кажется, код обрабатывает один вложенный элемент <li> как если бы он был четвертым дочерним элементом в родительском элементе <ul> .


  1. Как заменить буллентные точки в <ul> символом юникода?
  2. Как я могу сказать CSS пропустить вложенные <ul> при применении свойств nth-child(n) ?

Всего 2 ответа


Ответ 1: Если вы используете Unicode вместо пуль, вам нужно будет использовать,

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

И, пожалуйста, используйте ваш юникод в качестве position: absolute; Надеюсь, ваш код - простое решение. Один и тот же CSS будет работать все li но индивидуально вы просто меняете content: 'here is your 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&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) .)

кредит


Есть идеи?

10000