元素选择器 CSS 覆盖 class css

Question

任何人都可以解释为什么我的重置 CSS 会覆盖我更指定的 class 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>

元素选择器 CSS 覆盖 class css

Element selector CSS overriding class css

css

developer-tools