如何在另一个class -li中覆盖自定义class-li元素？

Question

我从HTML5和CSS3开始，我遇到了这种情况：

到目前为止，这是我的HTML和CSS代码：

＆＃13;

＆＃13;

.custom-list ol {
  counter-reset: item;
  padding-left: 10px;
}

.custom-list li {
  display: block;
}

.custom-list li::before {
  content: counters(item, ".") " ";
  counter-increment: item
}

.custom-list-2 ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 40px;
}

.custom-list-2 li::before {
  content: "# " counter(elementcounter) ". ";
  counter-increment: elementcounter;
  font-weight: bold;
}

.custom-list-3 ul {
  list-style-type: none;
  padding-left: 40px;
}

.custom-list-3 li::before {
  list-style-type: circle;
}

＆＃13;

<div class="custom-list">
  <div class="custom-list-3">
    <ul>
      <li>TEST 1</li>
      <li>TEST 2</li>
      <li>TEST 3</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我的结果是：

这就是我想要的：

这怎么办？

更新：1

这是问题所在......我需要1.6,1.7和1.8才能消失，只需要我们当前<ul></ul>提供

更新2

使用@sol解决方案几乎可以正常工作！

我现在需要的是在1.5文本之前消失点。

Answer 1

假设您仍希望将.custom-list-3的样式保留用于其他目的，可以通过添加以下内容在您需要的位置覆盖它：

.custom-list li {
  display: list-item;
  list-style-type: disc;
}

.custom-list-3 li::before {
  content: '';
}

＆＃13;

＆＃13;

.custom-list ol {
  counter-reset: item;
  padding-left: 10px;
}

.custom-list li {
  display: block;
}

.custom-list li::before {
  content: counters(item, ".") " ";
  counter-increment: item
}

.custom-list-2 ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 40px;
}

.custom-list-2 li::before {
  content: "# " counter(elementcounter) ". ";
  counter-increment: elementcounter;
  font-weight: bold;
}

.custom-list-3 ul {
  list-style-type: none;
  padding-left: 40px;
}

.custom-list-3 li::before {
  list-style-type: circle;
}

.custom-list li {
  display: list-item;
  list-style-type: disc;
}

.custom-list-3 li::before {
  content: '';
}

＆＃13;

<div class="custom-list">
  <div class="custom-list-3">
    <ul>
      <li>TEST 1</li>
      <li>TEST 2</li>
      <li>TEST 3</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;