前端ABC记得之前看到一句话“为了性能考虑，能用CSS实现的特效和功能，尽量不要使用JavaScript脚本”，因为JS的特效基本都是针对DOM节点的操作，只要DOM发生变化，就肯定会引起回流，回流是比较消耗资源的，所以为了性能考虑能避免就要避免。下面介绍两种CSS伪选择器实现按钮功能。
一. checked伪选择器
大家都知道表单中的复选框<input type="checkbox">，可以配合<label>元素一起使用，点击<label>就相当于勾选了复选框，而且点击第二次，就相当于取消勾选。所以我们可以用这种特性来实现，用按钮操作时元素的显示和隐藏。代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div-container{
display: none;
width:200px;
height:auto;
border: 1px #ccc solid;
padding: 20px;
}
#show{
display: none;
}
#hidden{
display: none;
}
#show:checked ~ .div-container{
display: block;
}
</style>
</head>
<body>
<show id="divid">
<div class="menu-btn">
<label for="show">显示</label>
</div>
<input type="checkbox" id="show">
<div class="div-container">
你是我心中的碧海蓝天
</div>
</show>
<script type="text/javascript">
</script>
</body>
</html>
当点击<label> 时就相当于勾选了<input> 元素，第二次点击相当于取消了勾选，再选择适合的选择器就可以实现想要的效果。
二. 使用target伪选择器
大家都知道，我们可以给一个<div>加一个id属性，然后<a> 标签设置瞄点，当点击<a>标签时就会定位到<div>元素所在的位置。同样我们也可以给设有id属性的标签用target伪选择器来设置当点击<a> 元素后它的CSS样式。代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div-container{
display: none;
width:200px;
height:auto;
border: 1px #ccc solid;
padding: 20px;
}
a{
text-decoration: none;
}
#show:target> .div-container{
display: block;
}
#show:target> .menu-btn> a:first-of-type{
display: none;
}
#show:not(:target)> .div-container{
display: none;
}
//not的意思是当瞄点不在show元素时
#show:not(:target)> .menu-btn> a:last-of-type{
display: none;
}
</style>
</head>
<body>
<show id="show">
<div class="menu-btn">
<a href="#show">显示</a>
<a href="#hidden">隐藏</a>
</div>
<div class="div-container">
你是我心中的碧海蓝天
</div>
</show>
<script type="text/javascript">
</script>
</body>
</html>
在上面的例子中有两个瞄点，一个用于显示，一个用于隐藏，当点击瞄点为show的标签时，元素显示；点击瞄点为hidden时，元素隐藏，此时用了否定选择器not，它的意思是当瞄点不在该标签时。
以上的内容都是一些小技巧，当然CSS不能做JS所能做的全部事，但是还是那句话“能用CSS实现的，尽量不要用JavaScript”。
欢迎分享本文，转载请保留出处：前端ABC » 用CSS伪选择器实现脚本控制的按钮功能