如何让子元素继承父元素样式？解决li与p标签样式不一致问题

嘿，先给你揪出核心问题：你的HTML结构不符合规范！p标签是块级文本元素，它内部不能嵌套ul这种块级元素——浏览器会自动修正这个错误，把ul从p标签里“剥离”出来，变成p的兄弟元素。这就导致你写的嵌套选择器p > ul li根本找不到目标元素，样式自然不生效啦。

第一步：修正HTML结构 #

你可以把包裹文本和列表的p标签换成div（或者其他块级容器），这样结构就合法了：

<div>
  <div class="text-group">
    Example paragraph
    <ul>
      <li>Example list item 1</li>
      <li>Example list item 2</li>
      <li>Example list item 3</li>
    </ul>
  </div>
</div>

如果一定要保留单独的p标签展示段落文本，也可以把ul放在p的外面，共享同一个父容器：

<div class="content-wrap">
  <p>Example paragraph</p>
  <ul>
    <li>Example list item 1</li>
    <li>Example list item 2</li>
    <li>Example list item 3</li>
  </ul>
</div>

第二步：用Sass设置正确的样式 #

针对第一种结构（div包裹文本+列表） #

直接让列表项继承父容器的字体样式，不用重复写数值，更灵活：

.text-group {
  font-size: 1.1rem;
  // 让列表项继承父元素的字体大小
  ul li {
    font-size: inherit;
    // 如果还有其他样式（比如颜色、行高），也可以用inherit统一继承
    color: inherit;
    line-height: inherit;
  }
}

针对第二种结构（p和ul同级） #

让p和列表项都继承父容器的样式：

.content-wrap {
  font-size: 1.1rem;
  p, ul li {
    font-size: inherit;
  }
}

这里的inherit关键字是关键，它会让子元素直接沿用父元素的对应样式属性，以后你修改父容器的字体大小或其他文本样式时，子元素会自动同步，不用逐个修改。

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