[分享]css具有继承性和层叠性

CSS（Cascading Style Sheets）是一种用于控制HTML元素样式的语言，具有两个重要特性：继承性和层叠性。

/* 继承性 */
p {
  color: blue;
}

/* 父元素的样式会被子元素继承 */
div {
  font-size: 18px;
}

/* 子元素继承父元素的样式 */
div p {
  /* 继承5号字体大小和蓝色字体颜色 */
  font-size: inherit;
  color: inherit;
} 

继承性指的是子元素会继承父元素的某些样式属性，比如字体颜色、文本对齐等。这种继承关系可通过CSS选择器实现，从而使得页面布局更为方便快捷，同时也能节省开发时间。

/* 层叠性 */
p {
  font-size: 18px;
  color: blue;
}

/* 权重大的样式会覆盖权重小的样式 */
p {
  color: green;
}

/* 权重相同的样式按照CSS文件出现顺序覆盖 */
p {
  font-size: 16px;
} 

层叠性指的是当存在两个或多个相同的样式时，CSS会按照一定的规则计算出最终的样式效果。这种规则是通过样式选择器的层叠顺序、样式权重和继承属性组成的。

总之，继承性和层叠性都是CSS的重要特性，它们使得我们的页面布局更为便捷、灵活，一定程度上减少了Web开发过程中的重复劳动和代码量。