样式继承与联集

使用选择器套用样式时，除了权重，另外的重要观念就是“继承”和“联集”，继承表示子元素会自动套用父元素的样式属性，联集则是同一个元素，套用相同权重选择器的样式属性，这篇教学会介绍样式的继承与联集，以及如何透过浏览器的开发者工具，观察样式的继承。

快速导览：

• 样式的继承
• 观察样式继承
• 样式的联集

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

样式的继承

继承是 CSS 的基本行为，意思是“子元素自动套用父元素的样式属性”，不过实际操作时，却会发现“有些样式属性会继承，有些样式属性则不会继承”的状况，下方列出会“默认”具有继承特性的样式属性，这时候通常大多数“文字样式”的属性都会具有继承特性。

注意，虽然继承会保留样式，但并不会继承任何权重，所以权重最低，可以透过其他方式覆盖。

以下方的 HTML 和 CSS 为例，虽然只设定 #apple 的文字颜色和大小，但却会影响到内容所有元素的文字样式。

<!-- HTML 程式碼 -->
<div id="apple">
  <h2>oxxo.studio</h2>
  <div>STEAM 教育學習網</div>
  <p>hello world!!!</p>
</div>

<!-- CSS 程式碼 -->
<style>
  #apple {
    color: red;
    font-size: 30px;
  }
</style>

不过如果是大多数方框模型 ( box model ) 的样式属性，例如 margin、padding、background 或 border...等，则不具有继承的特性，目的也是为了避免套用样式后，影响到整体排版，以下方的 HTML 和 CSS 为例，虽然设定了 #apple 的边框和间距，但内容却完全不会被影响。

<!-- HTML 程式碼 -->
<div id="apple">
  <h2>oxxo.studio</h2>
  <div>STEAM 教育學習網</div>
  <p>hello world!!!</p>
</div>

<!-- CSS 程式碼 -->
<style>
#apple {border: 1px solid #000;}
</style>

观察样式继承

使用 Chrome 打开网页后，使用快速键 ( 通常是 alt + ctrl + i 或 alt + command + i ) ，或使用选单打开“开发者工具”，可以观察具有父子关系的元素，彼此的样式是否继承。

打开开发者工具后，选择 Element 页签就能观察网页中的元素结构，左侧 Styles 页签里能观察特定元素的样式。

在 Styles 页签，如果有看见 inherited from XXXXX 的样式，表示这些样式属性是透过继承而来。

如果继承的样式属性里，有“不会被继承”的样式，那么在 inherited from XXXXX 中这些属性就会以较低亮度或灰色的方式呈现。表示子元素不会套用这些属性，透过浏览器的开发者工具，可以很方便又快速的观察样式属性的继承。

样式的联集

如果说继承是父元素的样式继承到子元素，联集就是单一元素“套用多个选择器的样式”，通常套用样式时，会先参考“权重”，而权重的参照标准不外乎就是行内样式、顺序、计算数值以及是否有添加 !important，但如果在权重相同的状况下，就会进行样式的联集。

更多参考：CSS 选择器的优先级 ( 权重 )

举例来说，下方是两个 h1 的样式，在包含的样式属性相同的状况下，会按照顺序执行，所以 h1 会呈现蓝色文字。

h1 {color: red;}
h1 {color: blue;}

但如果不同的选择器里具有不同的样式属性，不同的样式属性会保留，重复的样式属性会根据权重被覆盖，例如下方的 CSS，就会产生文字大小 30px，蓝色文字，黄色底色的效果。

h1 {
  color: red;
  background: #ff0;
}
.title {
  color: blue;
  font-size: 30px;
}

小结

CSS 的继承和联集其实很简单，基本上不需要刻意去记忆，因为就连撰写简单的 CSS 都会不断用到，透过不断的练习就会慢慢熟悉。

意见反馈