CSS三大特性继承性、层叠性和优先级详解

1. 继承性（Inheritance）

继承性指的是在CSS中，子元素可以继承父元素的某些样式属性。这意味着，如果我们为父元素设置了一些样式属性，子元素将默认继承这些属性，除非子元素显式地重写了这些属性。

示例1：HTML结构

<div class="parent">
  <p>子元素继承父元素的样式</p>
</div>

示例1：CSS样式

.parent {
  color: blue;
  font-size: 14px;
}

.parent p {
  font-weight: bold;
}

在示例1中，子元素<p>将会继承父元素.parent的颜色（blue）和字体大小（14px），并且还会应用自己的font-weight样式（bold）。

2. 层叠性（Specificity）

层叠性指的是当多个规则选择器选择同一个元素并设置相同属性时，浏览器根据选择器的特定性（specificity）来决定哪个规则应用于元素。选择器的特定性由选择器的不同部分（标签选择器、类选择器、ID选择器）以及内联样式（inline style）来确定。

示例2：HTML结构

<div class="parent">
  <p id="child">层叠性示例</p>
</div>

示例2：CSS样式

.parent p {
  color: blue;
}

#child {
  color: red;
  font-weight: bold;
}

在示例2中，.parent p选择器和#child选择器都选择了<p>元素，且都设置了颜色属性。由于ID选择器比类选择器具有更高的特定性，所以#child的颜色样式（red）会覆盖.parent p的颜色样式（blue），而且#child还设置了字体加粗样式（font-weight: bold）。

3. 优先级（Priority）

优先级指的是当多个规则应用于同一个元素时，浏览器根据选择器的优先级来决定哪个规则应用于元素。选择器的优先级由选择器的特定性、!important声明以及样式的声明顺序来确定。

选择器的特定性如下：
- 内联样式拥有最高优先级，即为1000。
- 每个ID选择器增加100。
- 每个类选择器、伪类选择器和属性选择器增加10。
- 每个元素选择器和伪元素选择器增加1。

示例3：HTML结构

<div class="parent" style="color: blue;">
  <p id="child" class="my-class">优先级示例</p>
</div>

示例3：CSS样式

.parent {
  color: red;
}

#child.my-class {
  color: green;
}

p {
  color: orange;
}

在示例3中，.parent的内联样式为蓝色，而规则#child.my-class选择器具有更高的特定性，所以#child.my-class的颜色样式（green）会覆盖.parent和p的颜色样式（red和orange）。

以上就是对CSS三大特性继承性、层叠性和优先级的详细说明。希望能帮助你理解它们在CSS中的重要作用。