所以,这是我的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}的颜色红色?如果没有,谁能想到另一种方法呢?
答案 0 :(得分:3)
元素&gt;元素选择器用于选择具有特定父元素的元素。
注意:未选择直接不是指定父级子级的元素。
因此,您必须使用+
选择器:
元素+元素选择器用于选择紧跟在第一个指定元素之后(而不是在其中)的元素。
阅读更多:
在您的案例更改代码中:
.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;
答案 1 :(得分:3)
CSS中是否有办法检查
btn-primary
内是否存在stepwizard__step
类,如果存在,是否将stepwizard__step-text
的颜色更改为红色?
是的,但只有在stepwizard__step-text
之后 btn-primary
之后才会出现。这是因为规则只在DOM树下面,而不是父元素或前辈。
规则可以按如下方式构建:
在.btn-primary
...
.stepwizard__step
.stepwizard__step .btn-primary
...并定位.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;
}
&#13;
<div class="stepwizard__step">
<a class="btn btn-primary stepwizard_btn">1</a>
<p class="stepwizard__step-text">Payment</p>
</div>
&#13;
答案 2 :(得分:1)
你可以这样做:
.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;
希望它适合您的使用!
答案 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;}
如果还有其他混淆,请告诉我?