如何修改无序列表(ul)的背景颜色且不改变列表内的文字颜色？

实现原理 #

通过为<ul>标签设置background-colorCSS属性即可仅修改列表背景色，该属性不会影响子元素的文字颜色，不需要额外修改<li>内的文字样式。如果需要调整背景和内容的间距，可同步设置padding属性优化显示效果。

完整修改后的代码示例 #

以下示例将列表背景色设置为浅灰色#f0f0f0，你可以替换为任意需要的色值：

<!-- 可把样式加在页面head部分，统一控制所有目标ul样式 -->
<style>
.custom-ul {
  background-color: #f0f0f0;
  /* 可选：调整内边距让背景显示更自然 */
  padding: 10px 10px 10px 30px;
  /* 可选：调整外边距控制列表之间的间距，可替代你原本用来分隔的空div */
  margin-bottom: 20px;
}
</style>

<ul class="custom-ul">
    <li>&nbsp;2 different sizes (Small &amp; Large).</li>
</ul>

<ul class="custom-ul">
    <li>2 different widths (265mm &amp; 420mm).</li>
</ul>

<ul class="custom-ul">
    <li>4 different head rest mounts.</li>
</ul>

<ul class="custom-ul">
    <li>Orderable replacement pads.</li>
</ul>

补充说明 #

• 如果你只需要修改单个列表的背景，不需要统一样式，直接给对应的<ul>标签加style属性即可，示例：<ul style="background-color: #f0f0f0; padding: 10px 10px 10px 30px;">
• 原来用来分隔列表的空<div>可以保留，也可以删掉通过给.custom-ul设置margin-bottom属性控制间距，代码更简洁。

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