是否可以相对于另一个CSS类(而不是外部类)设置CSS类的样式?

时间:2017-05-31 06:17:55

标签: html css css-selectors

所以,这是我的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类,如果存在,则更改{{1}的颜色红色?如果没有,谁能想到另一种方法呢?

4 个答案:

答案 0 :(得分:3)

  

元素&gt;元素选择器用于选择具有特定父元素的元素。

     

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

因此,您必须使用+选择器:

  

元素+元素选择器用于选择紧跟在第一个指定元素之后(而不是在其中)的元素。

阅读更多:

  

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

在您的案例更改代码中:

&#13;
&#13;
.btn-primary + p.stepwizard__step-text {
  color: red;
}
&#13;
<div class="stepwizard__step">
    <a class="btn btn-primary stepwizard_btn">1</a>
    <p class="stepwizard__step-text">Payment</p>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

  

CSS中是否有办法检查btn-primary内是否存在stepwizard__step类,如果存在,是否将stepwizard__step-text的颜色更改为红色?

是的,但只有在stepwizard__step-text之后 btn-primary之后才会出现。这是因为规则只在DOM树下面,而不是父元素或前辈。

规则可以按如下方式构建:

  1. .btn-primary ...

    中选择.stepwizard__step
    .stepwizard__step .btn-primary
    
  2. ...并定位.stepwizard__step-textright after it

    .stepwizard__step .btn-primary + .stepwizard__step-text
    
  3. 如果.btn-primary.stepwizard__step-text之间可以有元素,请在最后一个选择器中使用~代替+。这是general sibling selector

    您的示例将变为类似以下内容。

    &#13;
    &#13;
    .stepwizard__step .btn-primary ~ .stepwizard__step-text {
      color: red;
    }
    &#13;
    <div class="stepwizard__step">
      <a class="btn btn-primary stepwizard_btn">1</a>
      <p class="stepwizard__step-text">Payment</p>
    </div>
    &#13;
    &#13;
    &#13;

答案 2 :(得分:1)

你可以这样做:

&#13;
&#13;
.btn-primary+p.stepwizard__step-text {
  color: red;
}
&#13;
<div class="stepwizard__step">
  <a class="btn btn-primary stepwizard_btn">1</a>
  <p class="stepwizard__step-text">Payment</p>
</div>
&#13;
&#13;
&#13;

希望它适合您的使用!

答案 3 :(得分:1)

这是解决方案:

  

.stepwizard__step&gt; a + p {color:red;}

  

.stepwizard__step a + p {color:red;}

  

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

  

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

如果还有其他混淆,请告诉我?