如何让CSS中无序列表文本自动与段落元素样式保持一致？

浏览器默认样式表会给<ul>、<li>设置和<p>不同的字体、行高、边距等属性，导致样式差异。要让列表文本自动同步段落样式，无需重复修改，推荐以下几种实用方法：

方法1：通过全局父元素继承（最简洁） #

把段落的文本样式定义在全局容器（比如<body>），让<p>和<li>都继承这些样式，后续只需要修改父元素的样式，所有文本都会同步更新。

修改你的styles.css：

/* 全局文本样式，p和li都会继承 */
body {
  font-size: 16px;
  line-height: 1.6;
  font-family: sans-serif;
  color: #333;
}

ul {
  list-style-position: inside;
  /* 匹配p的默认上下边距，消除间距差异 */
  margin: 1em 0;
  padding: 0;
}

这样<li>会自动继承<body>的文本样式，和<p>完全一致，后续修改<body>的样式时，列表文本也会跟着变化。

方法2：使用CSS变量（灵活可控） #

把文本样式定义为全局CSS变量，然后让<p>和<li>引用这些变量，后续只需要修改变量值，所有关联元素的样式都会同步。

示例代码：

/* 定义全局文本样式变量 */
:root {
  --text-font: sans-serif;
  --text-size: 16px;
  --text-line-height: 1.6;
  --text-color: #333;
}

p {
  font-family: var(--text-font);
  font-size: var(--text-size);
  line-height: var(--text-line-height);
  color: var(--text-color);
  margin: 1em 0;
}

ul {
  list-style-position: inside;
  margin: 1em 0;
  padding: 0;
}

li {
  /* 直接引用变量，和p保持一致 */
  font-family: var(--text-font);
  font-size: var(--text-size);
  line-height: var(--text-line-height);
  color: var(--text-color);
}

这种方法适合需要局部调整文本样式的场景，比如某些区域需要不同的字体，只需要重写变量即可。

方法3：统一选择器设置（直接高效） #

直接把<p>和<li>放在同一个选择器里设置文本样式，修改时只需要维护这一块代码。

示例代码：

/* 统一设置p和li的文本样式 */
p, li {
  font-size: 16px;
  line-height: 1.6;
  font-family: sans-serif;
  color: #333;
  margin: 0;
}

/* 单独设置p的上下边距（匹配浏览器默认） */
p {
  margin: 1em 0;
}

ul {
  list-style-position: inside;
  margin: 1em 0;
  padding: 0;
}

这种方法无需依赖继承或变量，直接把需要同步的样式绑定在一起，适合简单的项目场景。

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