元素选择器CSS覆盖类CSS

Question

有人可以解释为什么我的重置CSS会覆盖我指定的类CSS吗？

<div class="plan-price heading--xl">
  <span data-annual="127" data-montly="159">
    <sup>$</sup>
    <span>127</span>
    <span class="plan-month_marker heading--body_title"> /mo</span>
  </span>
</div>

Answer 1

这就是CSS的工作方式。您无需为跨度指定值，而仅为外部div指定值。内部span的定义比任何外部选择器都更具体，因此它将采用为span元素定义的任何内容。

如果希望span元素的样式与默认样式不同，则必须更新样式。

span {
  font-size: 20px;
}

.heading--xl {
  font-size: 12px;
}

<div class="plan-price heading--xl">
  <span data-annual="127" data-montly="159">
    <sup>$</sup>
    <span>127</span>
  <span class="plan-month_marker heading--body_title"> /mo</span>
  </span>
</div>