html - 是否可以相对于另一个 CSS 类(不是外部类)来设置 CSS 类的样式？

Question

所以，这是我的 HTML 代码片段:

<div class="stepwizard__step"> 
  <a class="btn btn-primary stepwizard__btn">1</a>
  <p class="stepwizard__step-text">Payment</p>
</div>

基本上，我想做的是，每次有一个 Bootstrap 主按钮(.btn-primary)时，我想更改 .stepwizard__step-text(在本例中为“付款”)变为红色。

这可能吗？

我的第一直觉是尝试这样的事情:

.btn-primary > .stepwizard__step-text {
  color: red;
}

但后来我意识到这行不通，因为 stepwizard__step-text 类不在 btn-primary 类中。

我意识到这有点牵强，但是 CSS 中有没有一种方法可以检查 btn-primary 类是否存在于 stepwizard__step 中，如果存在，将 stepwizard__step-text 的颜色更改为红色？如果没有，谁能想到另一种方法来做到这一点？

Answer 1

The element>element selector is used to select elements with a specific parent.

Note: Elements that are not directly a child of the specified parent, are not selected.

所以，你必须使用+选择器:

The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.

阅读更多:

https://www.w3schools.com/cssref/sel_element_gt.asp

在您的案例中，更改代码如下:

.btn-primary + p.stepwizard__step-text {
  color: red;
}

<div class="stepwizard__step">
    <a class="btn btn-primary stepwizard_btn">1</a>
    <p class="stepwizard__step-text">Payment</p>
</div>