input与label搭配的顶级运用 · (一)
input与label搭配的顶级运用 · (一)
十二.
发布于 2025-10-22 14:25:01
发布于 2025-10-22 14:25:01
你还为纯用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；
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-06-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
