CSS 特殊性和继承性

Question

给定以下代码：

* {
  font-size: 18px;
}

.container {
  font-size: 50%;
}

<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus.
  </p>
</div>

结果是 <p> 标签应用了 18px 字体大小。但是 div 容器内的每个元素不应该继承我应用的字体大小吗？不管 * 选择器将字体大小应用到 <p> 标签，因为标签只值 1 分而 class 值 10 分？

Answer 1

* 优先于父选择器，就像您对容器所做的那样。你应该能够达到你的观点添加到 p

font-size: inherit;

或者这也应该有效：

.container * {
    font-size: inherit;
}

Answer 2

星号 * 是 CSS 的通用选择器。它匹配任何类型的单个元素。请看这个link，有很好的解释 (why) is the CSS star selector considered harmful?

Answer 3

.container 规则与 p 元素不匹配。所以这里的特异性是无关紧要的。继承和特殊性是不同的概念，只有当更多 specific/less 特定规则包含带有 inherit 的声明时，它们才会相互作用。这里不是这种情况。

就p元素而言，只有*规则适用，*包含它自己的font-size声明，所以指定的字体大小遵循该声明。

如果 * 规则没有自己的 font-size 声明，则 p 元素将从 .container.

如果您希望 .container 的后代采用其字体大小，您将需要一个额外的 .container * 规则。但是，当涉及到相对值时，非常小心使用 inherit 关键字 — 您可能想让所有后代保持相同的大小，因此 1em 或 100% 在这里比 inherit 更合适：

* {
  font-size: 18px;
}

.container {
  font-size: 50%;
}

.container * {
  font-size: 1em;
}

<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus.
  </p>
</div>

CSS 特殊性和继承性

CSS Specificity and Inheritance

css

css-selectors

css-specificity