Question

我读到了关于CSS级联规则并完全了解它。

内联样式：1000分
ID：100 pts
分类：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标签不遵循我内联设置的字体大小，甚至不遵循css文件。即使它在位置方面低得多，在特异性方面也更高

Answer 1

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

问题是，只有在目标子项本身没有设置font-size时，才会将font-size设置为parent。如果未设置，它将级联到父级，直到找到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>

这个可行，因为我在font-size内部的p标记上明确设置div.container属性，覆盖了我为p标记设置的早期样式

请注意，如果我之前删除了p标记的样式，则会占用父项的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; 
}

父母不改变孩子的字体大小

3 个答案: