Nano Hash - криптовалюты, майнинг, программирование

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

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

.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 применялся к вложенному классу <ul> — я просто хочу, чтобы это был стандартный маркер.

Я пробовал .thunderbolt list-style: none, но все, что у меня получилось, это исчезновение моего символа молнии.

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

  1. Как заменить выделенные точки в <ul> символом Юникода?
  2. Как указать CSS пропускать вложенные <ul> при применении свойств nth-child(n)?
css unicode emoji html-lists
08.02.2020

  • @MrLister Извините, я давно не был здесь. Добавил код в содержимое поста 09.02.2020

Ответы:


1

Ответ 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'; Я надеюсь, что это будет самый простой способ реализовать элементы Unicode вместо элементов маркера.

Ответ 2: Если вы используете .thundebolt > li, я надеюсь, что он будет работать только в определенном списке. Можешь попробовать.

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

09.02.2020
  • После избавления от : в .thunderbolt li: { казалось, что все, что нужно сделать, это избавиться от маркера. Я хочу, чтобы символы Юникода заменяли маркеры. 09.02.2020

    • 2 

    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.
    • I was doing this in Blogspot, which has a built-in style sheet (that I didn't want to backup, edit, then reupload), so I had to add !important after my changes in order for them to apply.
      • Examples:
      • list-stye: "\26A1 "!important;
      • list-style-position: outside!important;
    • CSS по-прежнему рассматривал вложенный <li> как nth-child(4), поэтому мне пришлось пропустить его в моей нумерации nth-child(n) в моем родительском списке. (Обратите внимание, что я делаю nth-child(3), а затем перехожу к nth-child(5).)

    Кредит

    09.02.2020
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..