如何调整自定义项目符号列表层级缩进与边距并修改符号颜色？

问题原因 #

当前代码中第二层列表左距变为150px，是因为CSS选择器.vocab > .list ul会匹配所有层级的<ul>元素，包括嵌套的第二层<ul>，导致它也继承了margin-left:75px，两层叠加后总缩进变成75px+75px=150px，不符合需求。

解决方案 #

保留原有HTML结构（可优化非标准标签），修改CSS如下：

修改后的CSS代码

/* 第一层列表：基础缩进75px */
.vocab > .list > ul {
  list-style: none;
  margin-left: 75px;
  padding: 0;
  color: black;
}

/* 第二层列表：相对第一层右移15px */
.vocab > .list ul ul {
  margin-left: 15px;
}

/* 自定义红色项目符号，仅设置右侧内边距避免影响缩进 */
.vocab > .list ul li::before {
  content: "\2022";
  padding-right: 10px;
  color: red;
}

HTML优化建议（可选）

<p1>不是HTML标准标签，建议替换为语义化标签，比如作为标题用<h2>：

<div class="vocab">
  <h2>Vocab</h2>
  <div class="list">
     <ul>
        <li>Word
           <ul>
              <li>Definition</li>
           </ul>
        </li>
     </ul>
  </div>
</div>

关键修改说明 #

1. 精准选择第一层列表：用.vocab > .list > ul只选中.list直接子元素的第一层<ul>，避免样式传递给嵌套列表
2. 单独设置第二层缩进：通过.vocab > .list ul ul选中嵌套的第二层<ul>，设置margin-left:15px实现相对第一层右移的效果
3. 优化项目符号内边距：将padding:10px改为padding-right:10px，防止左右内边距打乱列表的整体缩进布局

内容的提问来源于stack exchange，提问作者Tgggsx