是否可以设计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> 

基本上，我想要做的是，每次有一个引导主要按钮（.btn-primary），我想改变.stepwizard__step-text的颜色（在此时间情况下，“付款”）红色。

这可能吗？

我的第一反应是去尝试这样的：

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

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

我意识到这是一个有点舒展的，但有在CSS的方式来检查的stepwizard__step内部存在的btn-primary类，如果是的话，到stepwizard__step-text颜色变为红色？如果没有，任何人都可以想办法做到这一点？

Answer 1

元素>元素选择器用于选择具有特定父元素的元素。

注意：未选择不直接指定父级子元素的元素。

所以，必须使用+选择：

元素+元件选择器用于选择被后（未内侧）第一指定元件立即置于元件。

阅读更多：

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>

Answer 2

你可以这样做：

.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>

希望工程为您的使用！

Answer 3

这里是解决方案：

。stepwizard__step> A + P {颜色：红;}

或

.stepwizard__step A + P {颜色：红;}

或

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

或

.stepwizard__step .btn小学+ .stepwizard__step文本{颜色：红色;}

让我知道，如果有任何其他的混乱呢？

Answer 4

是否有CSS的方式来检查的stepwizard__step内部存在的btn-primary类，如果是的话，到stepwizard__step-text颜色变为红色？

是的，但只有当stepwizard__step-text来后的btn-primary。这是因为规则只会沿着DOM树走下去，而不会走向父元素或前辈。

的规则可以如下构建：

1. 选择.btn-primary内.stepwizard__step ...

   .stepwizard__step .btn-primary 
   

2. ...并定位了.stepwizard__step-text未来right after it。

   .stepwizard__step .btn-primary + .stepwizard__step-text 
   

如果有可以是.btn-primary和.stepwizard__step-text之间的元件，在最后选择器使用的~代替+。这是general sibling selector。

你的例子会变成如下所示。

.stepwizard__step .btn-primary ~ .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>