拒绝JavaScript，这三个CSS技巧你一定用的上​

本文介绍三个非常棒棒的CSS技巧，完全可以在你的项目中代替JavaScript，一起来看看这些技巧吧。

程序猿的生活：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）​zhuanlan.zhihu.com

:active伪类与CSS数据上报

超实用超高频使用的:empty伪类

用好:only-child伪类

1. :active伪类与CSS数据上报

如果想要知道两个按钮的点击率，CSS开发者可以自己动手，无需劳烦JavaScript开发者去埋点：

.button-1:active::after {
    content: url(./pixel.gif?action=click&id=button1);
    display: none;
}
 
.button-2:active::after {
    content: url(./pixel.gif?action=click&id=button2);
    display: none;
}

此时，当点击按钮的时候，相关行为数据就会上报给服务器，这种上报就算把JavaScript禁用掉也无法阻止，方便快捷，特别适合A/B测试。

2. 超实用超高频使用的:empty 伪类

:empty 伪类用来匹配空标签元素，例如：

<div class="cs-empty"></div>
.cs-empty:empty{