CSS3中的伪类选择器例如:hover,:before,:after在已经在前端开发中被广泛使用,但是可能开发者还不太熟悉:checked这个伪类选择器。本文将介绍:checked这个伪类选择器以及如何使用它写出更加有优雅的代码。
:checked伪类选择器顾名思义,表示的是type="checkbox"的input元素被选中的状态。在前端开发中,我们常用:hover伪类来设置鼠标悬浮时的样式,而由于checked状态的改变需要用户进行点击操作,使用:checked伪类,我们则可以设置鼠标点击后的状态。在使用zepto、jQuery库时,有一个经常使用的方法toggle用来隐藏和再现页面上的某个元素,了解:checked伪类的定义之后,我们完全可以用纯CSS实现toggle效果。
<style>
.toggle-item{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<div class="toggle">
<input id="toggle-trigger" type="checkbox" />
<div class="toggle-item"></div>
</div>
#toggle-trigger:not(checked) ~ .toggle-item{
display: block;
}
#toggle-trigger:checked ~ .toggle-item{
display: none;
}
但是我们想跟进一步,把toggle-trigger的范围扩展到checkbox之外,因为在展现toggle效果时,触发toggle的部分并不局限于checkbox一种形式。这时我们只需要使用label标签即可,label标签有一个for属性,通过设置for属性,可以将label标签指向特定的input元素,同时将checkbox隐藏,既可以达到点击label标签来触发toggle的效果。
<style>
.toggle-item{
width: 100px;
height: 100px;
background-color: pink;
}
#toggle-trigger {
display: none;
}
#toggle-trigger ~ :not(checked) ~ .toggle-item{
display: block;
}
#toggle-trigger:checked ~ .toggle-item{
display: none;
}
</style>
<div class="toggle">
<label for="toggle-trigger">触发器</label>
<input id="toggle-trigger" type="checkbox" />
<div class="toggle-item"></div>
</div>