在下面的示例中,我有2个div,我想弄清楚当.two
为.one
时如何使.active
变为绿色。可能吗? jsFiddle
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
.one.active ~ .two {
background: green;
}
<directive-one>
<div class="one active">
First block
</div>
</directive-one>
<directive-two>
<div class="two">
Second block
</div>
</directive-two>
答案 0 :(得分:3)
您可以这样做,特别是在css
中引用指令
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
directive-one:active ~ directive-two > .two {
background-color: green;
}
&#13;
<directive-one>
<div class="one active">
First block
</div>
</directive-one>
<directive-two>
<div class="two">
Second block
</div>
</directive-two>
&#13;
您也可以删除指令,以便可以访问div
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
.one:active ~ .two {
background-color: green;
}
&#13;
<div class="one active">
First block
</div>
<div class="two">
Second block
</div>
&#13;
否则,我不相信它可以访问不是兄弟或孩子的div,<div>
内的<directive-one>
试图访问另一个<div>
<directive-two>
答案 1 :(得分:1)
如果您使用directive-one
标记active
,则可以使用此css:
directive-one.active ~ directive-two > .two {
background: green;
}
我不认为有可能深入了解前面的&#39;虽然元素,但不完全确定。