input与label搭配的顶级运用 · (一)

你还为纯用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；