Замените маркеры на смайлики (или другие символы Юникода) (но не меняйте вложенные маркеры) - PullRequest
Новая
       11

Замените маркеры на смайлики (или другие символы Юникода) (но не меняйте вложенные маркеры)

0 голосов
/ 09 февраля 2020

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

.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 пропускать вложенные <ul> при применении nth-child(n) свойств?

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020 

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).)

Кредит

0 голосов
/ 09 февраля 2020

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

.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, тогда я надеюсь, что это будет работать только в указанном c списке. Вы можете попробовать.

Примечание: Если у вас есть лучшее решение, позвольте мне, я хочу узнать больше от вас, спасибо!

...