CSS 隐藏的秘密：两道面试题检验你的基础

2023-09-30 15:39:58

初露锋芒：揭秘 CSS 隐秘的规则

CSS，层叠样式表，是网页设计的基石，负责定义网页的外观和布局。虽然 CSS 的基本概念相对简单，但其复杂性和细微之处往往令初学者望而却步。两道经过精心设计的 CSS 面试题，将带领我们踏上探索 CSS 隐藏规则的旅程。

第一道题：CSS 颜色继承的玄机

问题：

<p style="color: green;">
  <span style="color: blue;">文本</span>
</p>

这段代码中，标签  的颜色为绿色，标签  的颜色为蓝色。问题是，标签  内文本的颜色究竟是绿色还是蓝色？

解答：

答案令人惊讶，是蓝色。虽然  标签指定了绿色作为颜色，但  标签的蓝色颜色会覆盖继承自  标签的绿色颜色。这是因为 CSS 中的样式具有继承性 ，子元素会继承父元素的样式，除非子元素自身明确指定了不同的样式。

第二道题：CSS 优先级的较量

问题：

<p>
  <span style="font-weight: bold;">粗体</span>
  <span style="font-weight: normal;">普通</span>
</p>

CSS 中，可以使用不同的属性值来指定文本的粗细，如 bold 和 normal。问题是，标签  内文本的粗细究竟是粗体还是普通？

解答：

答案是普通。虽然  标签指定了文本为粗体，但  标签也指定了文本为普通。在这种情况下， 标签的样式会覆盖  标签的样式，因为  标签是  标签的父元素 。此外，在 CSS 中，权重也起着至关重要的作用。权重高的规则将优先于权重低的规则。 标签的权重高于  标签，因此它的样式将被应用。

深入浅出：掌握 CSS 的精髓

这两道 CSS 面试题看似简单，却蕴藏着 CSS 中深奥的原理。通过深入解析这些问题，我们不仅可以检验自己的 CSS 基础知识，还能领会 CSS 继承和优先级等核心概念。

CSS 继承： CSS 继承允许子元素继承父元素的样式。这有助于简化样式的应用，避免冗余。但是，如果子元素自身指定了不同的样式，则会覆盖继承自父元素的样式。

CSS 优先级： CSS 优先级决定了在存在多个样式规则时哪个规则将被应用。权重较高的规则将优先于权重较低的规则。权重由以下因素决定：