Блог

Главная - Вопросы по программированию - Как выбрать первый набор для добавления псевдокласса, но не вложенных s

Как выбрать первый набор для добавления псевдокласса, но не вложенных s

#css

#css

Вопрос:

Я добавил пользовательское изображение, чтобы заменить маркированный список li. Я добавил его как псевдокласс, используя ::before . Однако я не могу настроить таргетинг только на первый набор «li». Разве это невозможно с псевдоклассами? Я уже пытался настроить таргетинг на первый набор li::before подобным образом, но безуспешно:

.hand-bullet-list > ul > li::before{

 .hand-bullet-list ul{
    list-style-type: none;
    margin-left: 0px;
}

.hand-bullet-list ul li{
    list-style: none;
    position: relative;
    padding: 0 0 22px 40px;
    margin-bottom: 20px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.hand-bullet-list ul li::before{
    background: url(https://jeremybullocksafeschools.com/wp-content/uploads/3.png) no-repeat;
    content: "";
    width: 40px;
    height: 42px;
    position: absolute;
    left: 0px;
    top: 0px;
}  
 <div class="hand-bullet-list bullet-list-two-columns">
<p><strong>Committee<br />
</strong>Some text.</p>
<p style="font-weight: 400;"><strong>Members of Committee include</strong></p>
<ul style="font-weight: 400;">
<li>Member 1</li>
<li>Member 2</li>
<li>Group 1
<ul>
<li>Group 1a</li>
<li>Group 1b</li>
<li>Group 1c</li>
<li>Group 1d</li>
</ul>
</li>
<li>Member 3</li>
<li>Member 4</li>
<li>Member 5</li>
</ul>
</div>

Комментарии:

1. вам нужно будет присвоить ul верхнего уровня класс, тогда вы сможете просто настроить таргетинг .class > li еще лучше, почему бы не добавить классы и в li, простые селекторы элементов — худшие, а объединение простых элементов в цепочку = очень плохо

2. .hand-bullet-list > ul > li::before это путь, у вас, вероятно, была опечатка или что-то перезаписывало css.

3. @Pete Спасибо, похоже, это была проблема с выбором. Добавление класса в ul в Google inspector позволило мне настроить таргетинг на этот первый набор li.

Ответ №1:

Это .hand-bullet-list > ul > li:before работает отлично. Я бы предположил, что ваша проблема лежит где-то еще.

 .hand-bullet-list ul {
  list-style-type: none;
  margin-left: 0px;
}

.hand-bullet-list ul li {
  list-style: none;
  position: relative;
  padding: 0 0 22px 40px;
  margin-bottom: 20px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.hand-bullet-list>ul>li::before {
  background: url(https://jeremybullocksafeschools.com/wp-content/uploads/3.png) no-repeat;
  content: "";
  width: 40px;
  height: 42px;
  position: absolute;
  left: 0px;
  top: 0px;
}  
 <div class="hand-bullet-list bullet-list-two-columns">
  <p><strong>Committee<br />
</strong>Some text.</p>
  <p style="font-weight: 400;"><strong>Members of Committee include</strong></p>
  <ul style="font-weight: 400;">
    <li>Member 1</li>
    <li>Member 2</li>
    <li>Group 1
      <ul>
        <li>Group 1a</li>
        <li>Group 1b</li>
        <li>Group 1c</li>
        <li>Group 1d</li>
      </ul>
    </li>
    <li>Member 3</li>
    <li>Member 4</li>
    <li>Member 5</li>
  </ul>
</div>

Комментарии:

1. Думаю, я должен был попробовать это в этой среде с минимизированным кодом. Странная часть в том, что как только я меняю прямой селектор на ручной маркированный список> ul>li::, прежде чем он полностью удалит псевдокласс, как будто это неправильный код.