如何控制列表项目符号颜色及导航栏分隔红点样式？

嘿，我来帮你搞定这两个CSS问题！

默认情况下，列表的项目符号（比如•）会继承文字的color属性，所以如果想单独给符号设置不同颜色，有两种实用方案：

• 用伪元素模拟项目符号（最灵活）
  先隐藏默认的列表符号，再用::before伪元素自定义一个符号，这样就能单独控制它的颜色、大小和位置：

  /* 给你的列表加一个专属类名，比如custom-bullet-list */
  .custom-bullet-list li {
    list-style: none; /* 隐藏默认符号 */
    position: relative;
    padding-left: 22px; /* 给自定义符号留出空间 */
  }
  
  .custom-bullet-list li::before {
    content: "•"; /* 模拟圆点符号，也可以换成▶、★这类字符 */
    color: #2ecc71; /* 这里设置你想要的符号颜色 */
    font-size: 18px; /* 调整符号大小 */
    position: absolute;
    left: 0;
    top: 2px; /* 让符号和文字垂直对齐 */
  }
  

• 用list-style-image（适合简单图标场景）
  如果你想用自定义图标当符号，可以用list-style-image，但这种方式没法直接改颜色（除非用SVG并通过CSS控制），示例：

  ul.icon-list {
    list-style-image: url('path-to-your-icon.svg');
  }
  

  要是用SVG的话，可以把SVG代码内联，再通过fill属性改颜色，但伪元素的方法还是更直观好上手。

这种情况几乎可以确定：这些圆点不是默认的列表项目符号，而是通过CSS伪元素（::before/::after）、边框或者背景图实现的。我教你怎么定位和修改：

第一步：找到圆点的来源 #

打开浏览器开发者工具（按F12，或者右键点击圆点→「检查」），在Elements面板里：

1. 先选中导航栏的某个列表项（比如<li>）
2. 看右侧Styles面板里的伪元素（比如li::after），或者检查相邻元素的样式
3. 通常你会看到类似这样的代码：

   .nav-item:not(:last-child)::after {
     content: "•";
     color: #ff0000; /* 这就是红色的来源 */
     margin: 0 10px;
   }
   

第二步：修改颜色 #

找到对应的选择器后，直接覆盖颜色即可。假设你的导航栏类名是main-nav，列表项类名是nav-link，可以这么写：

/* 替换成你实际的选择器 */
.main-nav .nav-link:not(:last-child)::after {
  color: #3498db; /* 改成你想要的颜色 */
  /* 还可以调整大小、间距，比如：
  font-size: 16px;
  margin: 0 12px;
  */
}

如果圆点是用边框实现的（比如给每个<li>加右边框，再用圆角做成圆点），那你需要修改border-color：

.main-nav .nav-link:not(:last-child) {
  border-right: 2px solid #3498db; /* 替换成目标颜色 */
  padding-right: 12px;
  margin-right: 12px;
}

要是实在找不到选择器，开发者工具里可以直接右键点击伪元素（在Elements面板的「::after」上），选择「Copy selector」，然后用这个选择器来写你的CSS规则就行。

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