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分而一个课程值10分？

Answer 1

.container规则与p元素不匹配。所以特异性在这里无关紧要。继承和特殊性是单独的概念，它们交互的唯一时间是更具体/不太具体的规则包含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>

Answer 2

*就像对容器一样优先于父选择器。你应该能够达到你的观点，增加到p

.container * {
    font-size: inherit;
}

或者这也应该有效：

root.after()

Answer 3

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

CSS特异性和继承

3 个答案: