Question

Havent多年来触摸html / css，所以我需要一些帮助。我有一个嵌套列表，并且想要设置外部列表（#todo）的样式，并且内部列表（#task）上只有“普通”项目符号。问题是当我设置外部列表样式时，它也会自动设置内部列表样式。作为一种固定的解决方案，我想到了从中移除li标签并将其制作为<p>的方式，并以某种方式在其前面添加了项目符号。如何在<p>标签的前面添加项目符号？

#parent .todo ul li:before{
    content: "";
    position: absolute;
    top: 5px;
    left: -25px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 2px solid #0bb5f4;
}



#parent .todo ul li:after{
    content: "";
    position: absolute;
    top: 14px;
    left: -21px;
    width: 2px;
    height: 75px;
    background: #0bb5f4
}

.task{
    padding-left: 25px;
}

<div class="todo">
    <div class="title">
        <p class="bold">Title1</p>
    </div>
                        
    <ul>
        <li>
            <div class="date">today</div>
            <div class="info">
                <p class="semi-bold">Name</p>
                <p class="description"><em>location</em></p>
                <div class="task">
                     <p>task1</p>
                     <p>task2</p>
                     <p>task3</p>
                </div>
            </div>
        </li>
                            
        <li>
            <div class="date">yesterday</div>
            <div class="info">
                <p class="semi-bold">Name2</p>
                <p class="description"><em>location2</em></p>
                <div class="task">
                    <p>item1</p>
                    <p>item2</p>
                    <p>item3</p>
                </div>
            </div>
        </li>
    </ul>
</div>

Answer 1

在外部列表的li元素上添加一个类，并在该类上应用要应用于外部列表的样式。这样，将不会设置内部列表的li元素的样式。

.outer-li {
  position: relative;
  list-style: none;
  margin: 10px 0 0 0;
}

.outer-li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid #0bb5f4;
}

.outer-li::after {
  content: "";
  position: absolute;
  top: 14px;
  left: -21px;
  width: 2px;
  height: 75px;
  background: #0bb5f4
}

<div class="todo">
  <div class="title">
    <p class="bold">Title1</p>
  </div>

  <ul class="outer">
    <li class="outer-li">
      <div class="date">today</div>
      <div class="info">
        <p class="semi-bold">Name</p>
        <p class="description"><em>location</em></p>
        <ul class="task">
          <li>task1</li>
          <li>task2</li>
          <li>task3</li>
        </ul>
      </div>
    </li>

    <li class="outer-li">
      <div class="date">yesterday</div>
      <div class="info">
        <p class="semi-bold">Name2</p>
        <p class="description"><em>location2</em></p>
        <ul class="task">
          <li>task1</li>
          <li>task2</li>
          <li>task3</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

或者，您可以使用::before伪选择器。

li {
  position: relative;
  list-style: none;
  margin: 10px 0 0 0;
}

li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid #0bb5f4;
}

li::after {
  content: "";
  position: absolute;
  top: 14px;
  left: -21px;
  width: 2px;
  height: 75px;
  background: #0bb5f4
}

.task {
  padding-left: 25px;
}

.task p {
  position: relative;
}

.task p::before {
  content: '';
  position: absolute;
  background: #222;
  width: 5px;
  height: 5px;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}

<div class="todo">
  <div class="title">
    <p class="bold">Title1</p>
  </div>

  <ul>
    <li>
      <div class="date">today</div>
      <div class="info">
        <p class="semi-bold">Name</p>
        <p class="description"><em>location</em></p>
        <div class="task">
          <p>task1</p>
          <p>task2</p>
          <p>task3</p>
        </div>
      </div>
    </li>
  </ul>
</div>

如何在不使用列表的情况下添加项目符号？

1 个答案: