✊不积跬步，无以至千里；不积小流，无以成江海

样式优先级规范、选择器权重计算方式

CSS样式优先级规范

CSS 样式优先级规范决定了当多个样式规则应用于同一个元素时，哪些规则将具有更高的优先级。CSS 样式优先级是根据选择器的特定性、权重和源顺序来计算的。以下是 CSS 样式优先级规范的一般规则，按照优先级递减的顺序排列：

内联样式（Inline Styles） ：在 HTML 元素的 style 属性中直接指定的样式具有最高优先级。
ID 选择器（ID Selectors） ：使用元素的 ID 选择器具有较高优先级。例如：

#header {
  color: blue;
}

在这种情况下，如果元素的 id 设置为 "header"，则该样式规则将具有较高优先级。

类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, Pseudo-class Selectors） ：这些选择器具有较低于 ID 选择器的优先级，但高于元素选择器。例如：

.my-class {
  color: green;
}

[type="text"] {
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

元素选择器（Element Selectors） ：元素选择器是最基本的选择器，其优先级较低。例如：

p {
  font-size: 16px;
}

当选择器具有相同的特定性时，可以使用以下规则进行计算：

特定性（Specificity） ：特定性是根据选择器中的各个组件赋予选择器的权重。特定性值由四个部分组成，分别是 a, b, c, d，其中 a 代表内联样式的特定性值，b 代表 ID 选择器的特定性值，c 代表类选择器、属性选择器和伪类选择器的特定性值，d 代表元素选择器的特定性值。特定性值越高，优先级越高。例如，选择器 p.my-class 的特定性值为 0, 1, 1, 0，而选择器 #header 的特定性值为 0, 1, 0, 0。
权重（Weight） ：权重是特定性值的计算结果，其中内联样式的权重最高，ID 选择器的权重次之，类选择器、属性选择器和伪类选择器的权重再次降低，而元素选择器的权重最低。
源顺序（Source Order） ：当具有相同特定性和权重的样式规则出现时，后面定义的样式规则将覆盖先前的规则。

请注意，这些规则提供了一种计算优先级的方法，但在实际使用中仍需谨慎。过度依赖特定性和权重可能导致代码的复杂性和维护困难。建议尽量避免过度使用内联样式，并采用良好的选择器命名约定来避免样式冲突。

CSS选择器权重计算方式

CSS 选择器的权重是通过特定性（Specificity）来计算的，特定性值越高，权重越大。特定性由四个部分组成：a, b, c, d，分别代表内联样式、ID 选择器、类选择器/属性选择器/伪类选择器、元素选择器的数量。

以下是 CSS 选择器权重计算方式的具体规则：

内联样式的特定性值为 1, 0, 0, 0。因此，内联样式具有最高的权重。
ID 选择器的特定性值为 0, 1, 0, 0。每个 ID 选择器都会增加特定性的权重。
类选择器、属性选择器和伪类选择器的特定性值为 0, 0, 1, 0。每个类选择器、属性选择器或伪类选择器都会增加特定性的权重。
元素选择器的特定性值为 0, 0, 0, 1。每个元素选择器都会增加特定性的权重。

根据特定性值的计算方式，可以使用以下规则来比较选择器的权重：

高特定性值的选择器具有更高的权重。例如，0, 1, 0, 0 的特定性值高于 0, 0, 3, 0 的特定性值。
当特定性值的组件相等时，比较下一个组件。例如，0, 1, 3, 0 的特定性值高于 0, 1, 2, 0 的特定性值。
如果特定性值的所有组件都相等，则根据源顺序（Source Order）决定应用的样式规则。后面定义的样式规则将覆盖先前的规则。

需要注意的是，特定性值的比较是按照从左到右的顺序逐个比较组件，而不是将组件相加。比较得出的结果决定了哪些样式规则将具有更高的优先级。

样式继承；单位px、em、rem、vw

CSS样式继承

CSS 样式继承是指元素在没有显式指定某个属性的情况下，会从其父元素继承相应的样式属性。这意味着父元素的某些样式会自动应用于其子元素，简化了样式的编写和维护。不是所有的样式都会被继承，只有一部分特定的属性才具有继承性。

以下是一些常见的 CSS 样式属性，它们具有继承性：

文字相关属性：font-family（字体族名称）、font-size（字体大小）、font-weight（字体粗细）、font-style（字体样式）、color（字体颜色）等。
文本相关属性：text-align（文本对齐方式）、line-height（行高）、text-decoration（文本装饰）等。
盒模型相关属性：margin（外边距）、padding（内边距）、border（边框）等。
列表相关属性：list-style-type（列表项样式类型）、list-style-position（列表项标记位置）等。
表格相关属性：border-collapse（边框合并方式）、text-align（单元格内文本对齐方式）等。
部分伪元素属性：::before、::after 等伪元素的样式属性也可以继承。

需要注意的是，并非所有属性都具有继承性。一些常见的不可继承的属性包括 width、height、border、background、padding 等。这些属性的值不会被子元素继承，需要为子元素显式地设置。

如果希望禁止子元素继承某个属性，可以使用 inherit 关键字或 initial 关键字来重置或初始化该属性的值。例如，color: inherit; 将使子元素继承父元素的文本颜色，而 color: initial; 将将该属性重置为初始值。

使用 CSS 样式继承可以简化样式的编写，提高代码的可维护性。然而，有时过度依赖继承可能导致样式的不可预测性和混乱，因此在设计和开发过程中，建议合理地使用继承，并结合其他选择器和样式规则来控制元素的外观和行为。

单位px、em、rem、vw

在 CSS 中，有几种常见的单位用于指定长度和宽度的值，包括像素（px）、相对长度单位（em、rem）和视窗单位（vw）。

像素（px） ：像素是最常见的长度单位，表示屏幕上的物理像素。它是一个绝对单位，具有固定的大小，不会随着其他因素的改变而改变。
相对长度单位（em、rem） ：
- em：em 是相对于当前元素的字体大小（font-size）的单位。如果父元素的字体大小是 16px，子元素设置为 1.5em，则子元素的大小将为 24px（1.5 * 16px）。
- rem：rem 也是相对长度单位，但是相对于根元素（即 <html> 元素）的字体大小。如果根元素的字体大小是 16px，子元素设置为 1.5rem，则子元素的大小也将为 24px（1.5 * 16px）。rem 的优点是它的值不会受到嵌套层级的影响。

相对长度单位允许我们根据父元素的大小来设置子元素的大小，使得在调整布局时更加灵活和可扩展。

视窗单位（vw） ：vw 表示视口宽度的百分比，其中 1vw 等于视口宽度的 1%。视口是指在浏览器中用于显示网页内容的区域。例如，如果视口宽度为 1000px，则 1vw 等于 10px（1% * 1000px）。视窗单位使得元素的大小可以相对于视口的大小进行调整，使得响应式设计更加方便。

视窗单位还有其他类似的单位，如 vh（视口高度的百分比）、vmin（视口宽度和高度中较小值的百分比）和 vmax（视口宽度和高度中较大值的百分比），可以根据需要选择使用。

常见文本相关样式

在 CSS 中，有许多常见的文本相关样式可以用来控制文本的外观和呈现方式。以下是一些常见的 CSS 文本相关样式属性：

color：设置文本颜色。例如：color: red;
font-family：设置字体族名称，用于指定文本所使用的字体。例如：font-family: Arial, sans-serif;
font-size：设置字体大小。可以使用像素（px）、百分比（%）或其他单位进行设置。例如：font-size: 16px;
font-weight：设置字体粗细。可以使用关键字（如 normal、bold）或数值（如 400、700）进行设置。例如：font-weight: bold;
font-style：设置字体样式，如斜体。可以使用关键字（如 normal、italic）进行设置。例如：font-style: italic;
text-align：设置文本对齐方式。可以是 left（左对齐）、right（右对齐）、center（居中对齐）或 justify（两端对齐）。例如：text-align: center;
text-decoration：设置文本装饰，如下划线、删除线等。可以是 none（无装饰）、underline（下划线）、overline（上划线）或 line-through（删除线）。例如：text-decoration: underline;
text-transform：设置文本转换，如大写、小写或首字母大写。可以是 none（无转换）、uppercase（大写）、lowercase（小写）或 capitalize（首字母大写）。例如：text-transform: uppercase;
line-height：设置行高，即文本行与文本行之间的距离。可以使用像素（px）、百分比（%）或无单位数值进行设置。例如：line-height: 1.5;
letter-spacing：设置字母间距。可以使用像素（px）、百分比（%）或其他单位进行设置。例如：letter-spacing: 1px;

这些是常见的 CSS 文本相关样式属性，可以帮助控制文本的外观和格式。通过合理使用这些样式属性，可以实现丰富多样的文本效果和排版布局。

CSS基础-CSS选择器优先级、样式继承、文本样式