Font-size parents 不改变 p children

Question

我阅读了 CSS 级联规则并完全了解这一点。

内联样式：1000 分
ID : 100 分
Class : 10 分
元素：1 分

但事实证明我的代码发生了一些奇怪的事情。当我有更高的特异性点时，该样式不适用。

这里我试图重现这个问题：

p {
  font-size: 10px
}


div.container {
  font-size: 30px !important;
}

<div class="container" style="font-size:20px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga nesciunt voluptatum eligendi tempora odio nemo delectus adipisci fugiat quasi quam hic pariatur ea beatae voluptas quae quas, blanditiis incidunt quia.</p>
</div>

p 标签不在 font-size 之后，我设置为内联，甚至在 css 文件中。即使它在位置上低得多，在特异性点上高得多

Answer 1

事实证明，这不是特异性点的问题，我认为更多的是继承和级联。很高兴我现在学到了一些东西。

问题是，将 font-size 设置为 parents 实际上只会在目标 children 本身未设置 font-size 时使用。不设置时，会级联到parents，直到找到font-size

的属性

但是当它在位置（低优先级）或较低的特异性点方面被设置得更早时，它不会级联起来查找 font-size 属性。

p {
  font-size: 10px
}


div.container {
  font-size: 30px !important;
}

.container p {
  font-size: 30px;
 }

<div class="container" style="font-size:20px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga nesciunt voluptatum eligendi tempora odio nemo delectus adipisci fugiat quasi quam hic pariatur ea beatae voluptas quae quas, blanditiis incidunt quia.</p>
</div>

这个之所以有效，是因为我在 div.container 本身内的 p 标签上明确设置了 font-size 属性，覆盖了我为 p 标签设置的早期样式

请注意，如果我之前删除 p 标签的样式，它将采用 parents

的 font-size

Answer 2

div.container {
  font-size: 30px !important;
}

<div class="container" style="font-size:20px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga nesciunt voluptatum eligendi tempora odio nemo delectus adipisci fugiat quasi quam hic pariatur ea beatae voluptas quae quas, blanditiis incidunt quia.</p>
</div>

Answer 3

试试这个

div.container p{
   font-size: 30px; 
}

Font-size parents 不改变 p children

Font-size on parents not changing the p children

html

css

css-selectors

css-specificity