CSS-样式表的继承性和层叠性CSS（层叠样式表）的继承性和层叠性是 CSS 的核心特性，理解它们对于编写高效、可维护的

CSS（层叠样式表）的继承性和层叠性是 CSS 的核心特性，理解它们对于编写高效、可维护的样式表至关重要。下面详细说明这两个概念：

1. CSS 的继承性（Inheritance）

1.1 什么是继承性？

继承性是指子元素会继承父元素的一些样式属性。

1.2 可继承的属性

以下是一些常见的可继承属性：

字体相关属性：
- font-family
- font-size
- font-weight
文本相关属性：
- text-align
- text-indent
- line-height
- color
列表相关属性：
- list-style
- list-style-type
- list-style-position
其他属性：
- visibility
- cursor

1.3 不可继承的属性

以下是一些常见的不可继承属性：

盒模型相关属性：
- width
- height
- margin
- padding
- border
定位相关属性：
- position
- top
- left
- right
- bottom
背景相关属性：
- background-color
- background-image

1.4 继承性的应用

<div class="parent">
  <p>这是一个段落。</p>
</div>

.parent {
  color: blue; /* 可继承属性 */
  font-size: 16px; /* 可继承属性 */
  border: 1px solid red; /* 不可继承属性 */
}

<p> 元素会继承 color 和 font-size，因此文本颜色为蓝色，字体大小为 16px。
<p> 元素不会继承 border，因此不会有边框。

1.5 强制继承

如果希望某个不可继承的属性也能继承父元素的值，可以使用 inherit 关键字：

.child {
  border: inherit; /* 强制继承父元素的 border */
}

2. CSS 的层叠性（Cascading）

2.1 什么是层叠性？

层叠性是指当多个 CSS 规则作用于同一个元素时，浏览器会根据一定的优先级规则来决定最终应用的样式。层叠性是 CSS 的核心特性之一，它使得样式表可以灵活地覆盖和组合。

2.2 层叠性的规则

层叠性的优先级由以下因素决定（优先级从高到低）：

来源（Origin）：
- 用户代理样式（浏览器默认样式） < 用户样式 < 作者样式（开发者写的样式）。
- !important 可以提升优先级。
选择器权重（Specificity）：
- 选择器的权重越高，优先级越高。
- 权重计算规则：
  - 内联样式（style=""）：1000
  - ID 选择器（#id）：100
  - 类选择器（.class）、属性选择器（[type="text"]）、伪类（:hover）：10
  - 元素选择器（div）、伪元素（::before）：1
  - 通配符（*）、组合符（+, ~, >）：0
源代码顺序（Order）：
- 如果权重相同，后定义的样式会覆盖前面的样式。

2.3 层叠性的应用

<div id="box" class="container" style="color: green;">Hello, World!</div>

/* 规则 1 */
#box {
  color: red; /* 权重：100 */
}

/* 规则 2 */
.container {
  color: blue; /* 权重：10 */
}

/* 规则 3 */
div {
  color: yellow; /* 权重：1 */
}

最终文本颜色为绿色，因为内联样式的优先级最高。
如果没有内联样式，文本颜色为红色，因为 ID 选择器的权重高于类选择器和元素选择器。

2.4 `!important` 的作用

!important 可以提升样式的优先级，覆盖其他规则：

.container {
  color: blue !important; /* 优先级最高 */
}

即使有内联样式或更高权重的选择器，!important 也会强制应用该样式。

3. 继承性和层叠性的综合应用

3.1 继承性与层叠性的结合

继承性决定了某些样式是否可以从父元素传递到子元素。
层叠性决定了当多个样式规则冲突时，哪个规则会被应用。

3.2 示例

<div class="parent">
  <p class="child">这是一个段落。</p>
</div>

.parent {
  color: blue; /* 可继承属性 */
  font-size: 16px; /* 可继承属性 */
}

.child {
  color: red; /* 覆盖继承的 color */
  font-size: inherit; /* 显式继承 font-size */
}

<p> 元素的 color 为红色（覆盖了继承的蓝色）。
<p> 元素的 font-size 为 16px（显式继承了父元素的值）。

4. 总结

继承性：
- 某些属性会从父元素传递到子元素。
- 可继承属性包括字体、文本、列表等。
- 不可继承属性包括盒模型、定位、背景等。
- 使用 inherit 可以强制继承不可继承的属性。
层叠性：
- 多个样式规则冲突时，浏览器会根据优先级规则决定最终样式。
- 优先级由来源、选择器权重和源代码顺序决定。
- !important 可以提升优先级。

内联样式（style=""）> ID 选择器（#id）> 类选择器（.class）> 元素选择器（div）> 通配符

继承性对优先级造成的影响

如果不能直接选中子元素，而是通过继承性影响子元素的话，遵循就近原则，谁描述的近听谁的。
如果描述的一样近，比较选择器权重，如果权重一样重，谁写在后面听谁的。

组件渲染顺序对优先级造成的影响

组件的加载顺序是自上而下的，也就是先加载父组件，再递归地加载其所有的子组件。
组件渲染顺序是按照深度优先遍历的方式，也就是先渲染最深层的子组件，再依次向上渲染其父组件。
选择器权重相同时，父组件样式的优先级高。

scoped对优先级的影响

选择器权重相同时，加scoped的优先级更高。

CSS-样式表的继承性和层叠性