CSS 样式穿透方法

CSS 样式穿透是在使用 CSS 样式表时，通过一些方法来修改子元素或者其他元素的样式，以实现一些特定的效果。本文将详细介绍一些常用的 CSS 样式穿透方法，包括层叠顺序、选择器权重、伪元素以及 CSS 变量。

一、层叠顺序

在 CSS 样式表中，层叠顺序指的是元素在显示时的前后关系，即元素的 Z 轴位置。在默认情况下，根据元素在 HTML 文档中的先后顺序，后出现的元素会覆盖先出现的元素。但是通过设置元素的层叠顺序，我们可以改变元素的显示顺序。

1.1 `z-index` 属性

z-index 属性用于控制元素的层叠顺序。默认情况下，元素的 z-index 值为 auto，表示元素按照它们在 HTML 文档中出现的顺序进行层叠。我们可以通过设置一个正整数值来改变元素的层叠顺序。z-index 值越大，则元素越靠近屏幕用户。

示例代码如下：

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 1;
    }
    .box2 {
        width: 150px;
        height: 150px;
        background-color: rgba(255, 0, 0, 0.5);
        position: absolute;
        top: 50px;
        left: 50px;
        z-index: 2;
    }
</style>

<div class="box">
    <div class="box2"></div>
</div>

运行结果：父元素 .box 的 z-index 值为 1，子元素 .box2 的 z-index 值为 2。所以 .box2 元素会遮盖住 .box 元素。

1.2 `position` 属性

除了通过设置 z-index 属性来改变元素的层叠顺序外，元素的 position 属性也会影响元素的层叠顺序。当元素的 position 属性值为 static（默认值）时，元素会根据 HTML 文档的结构进行层叠。当元素的 position 属性值为 relative、absolute 或 fixed 时，元素的层叠顺序会发生改变。

示例代码如下：

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .box2 {
        width: 150px;
        height: 150px;
        background-color: rgba(255, 0, 0, 0.5);
        position: absolute;
        top: 50px;
        left: 50px;
    }
</style>

<div class="box"></div>
<div class="box2"></div>

运行结果：.box2 元素由于设置了 position: absolute 属性值，所以会覆盖在 .box 元素之上。

二、选择器权重

当多个选择器作用于同一个元素时，CSS 样式的优先级由选择器的权重来决定。选择器的权重是一个值，用于确定样式的优先级。权重值越大，样式的优先级越高。

2.1 选择器权重计算规则

选择器权重是根据选择器的不同部分来计算的，计算规则如下：

每个元素选择器的权重值为 1。
伪元素选择器的权重值为 1。
类选择器的权重值为 10。
属性选择器的权重值为 10。
伪类选择器的权重值为 10。
ID 选择器的权重值为 100。
内联样式的权重值为 1000。

如果权重值相同，则后出现的选择器会覆盖先出现的选择器。

示例代码如下：

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .box2 {
        width: 150px;
        height: 150px;
        background-color: rgba(255, 0, 0, 0.5);
    }
    div.box {
        background-color: rgba(0, 0, 255, 0.5);
    }
    .box.box2 {
        background-color: rgba(0, 255, 0, 0.5);
    }
</style>

<div class="box"></div>
<div class="box2"></div>

运行结果：.box2 元素的背景颜色将会是绿色，因为它使用了 ID 选择器和类选择器，这两个选择器的权重值相同，但是 .box.box2 是后出现的，所以它的样式会覆盖前面两个选择器。

三、伪元素

伪元素是指在样式表中创建的并不是文档中真实存在的元素，而是通过 CSS 选择器来选择指定的元素并添加样式。通过使用伪元素，我们可以向页面添加一些特殊的效果，例如在元素内容前或后插入特定内容、改变元素的样式等。

3.1 `::before` 和 `::after`

::before 和 ::after 是 CSS 中常用的伪元素选择器。它们分别可以在选中元素的前面和后面插入内容。

示例代码如下：

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.5);
        position: relative;
    }
    .box::before {
        content: "Before";
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
    }
    .box::after {
        content: "After";
        color: #fff;
        position: absolute;
        bottom: 0;
        right: 0;
    }
</style>

<div class="box"></div>

运行结果：在 .box 元素的前面插入内容 “Before”，在后面插入内容 “After”。