你还为纯用css与html创作项目时,后代,父子,相邻,兄弟选择器,能力受限制而痛苦吗?
本篇教你一种新方法解决问题。
本篇文章拿 :active(伪类选择器) 举例子。
大家在应用元素选择器时有没有一个疑问-->
比如通过 兄弟选择器 ' ~ ' 与 父级选择器 ' > '.
<div class="link0">
<span class="link1">你好</span>
<span class="link2">我好</span>
</div>
想要在点击第一个span时第二个span放生变化,可以用:
<style>
.link1:active~.link2{
...span发生的改变...
)
</style>
想要在点击整个div时,就使第2个span发生变化,可以用:
<style>
.link0:active>.link2{
...span发生的改变...
)
</style>
这个时候,引出第二个问题:
当出现一下情况时:
<div class="link1">
<span></span>
</div>
<div class="link2">
<span></span>
</div>
如果想要在点击第一个div时,第二个div里面的span发生变化,你如果纯用css与html还有其他好办法吗?
这个时候就到了我分享的这个主题:input与label的结合运用。
下面先给大家看实品样例:
<label class="connect">
<div class="link1">
<span></span>
</div>
</label>
<div class="link2">
<input type="radio" id="connect" class="connect2">
<span class="connect3"></span>
</div>
通过input的id 与 label的for相绑定,意思是,点击label就相当于点击input,这是HTML规定的。
解决方案就是在第一个div的外面套一个<label>,label会自动被撑大
<style>
.connect:checked ~ .connect3{
...改变的东西...
}
</style>
点击第一个class就能该变connect3;