css - 选择::在祖先元素之前:悬停

Question

我有一个 css 三 Angular 形:

.triangle {
    display: block;
    height: 95px;
    position: relative;
}

.triangle::before, .triangle::after {
    content: ' ';

    width: 0;
    height: 0;

    position: absolute;

    border-style: solid;
    border-color: transparent;
}

.triangle::before {
    border-width: 10px 50px 85px 50px;
    border-bottom-color: #F5EACB;

    z-index: 2;
}

.triangle::after {
    border-width: 10px 56px 94px 56px;
    border-bottom-color: #FFFFFF;

    left: -6px;
    top: -6px;

    z-index: 1;
}

当 :hover 应用于 .triangle 类时，我想更改 .triangle::before 的 border-bottom-color 属性。可以用 css 做到这一点吗？

我认为它看起来像这样:

.triangle:hover .triangle::before {
    border-bottom-color: red;
}

或者这个:

.triangle:hover .triangle::first-child {
    border-bottom-color: red;
}

但事实并非如此。

我不想使用 js 解决方案，因为文档的其余部分是纯 css。

Answer 1

您想组合选择器:

.triangle:hover::before {
    border-bottom-color: red;
}

上面是在 triangle 类的元素上，当 hoverd 时，在 before 伪元素上。