CSS的几个小技巧：pointer-events, transform垂直居中,nth-child #33

千万不要用没有自动保存功能的编辑器！千万不要用没有自动保存功能的编辑器！千万不要用没有自动保存功能的编辑器！:(

好久没有写什么东西了，可能是因为最近一直做的事情都是在重复搬砖，没有什么新鲜的东西…更可能是因为太懒了…

总结一下前段时间学到的几个 css 小技巧，以免过几天又忘记了

CSS 控制超链接是否可点击：pointer-event

一开始我听说 CSS 可以 disable 超链接的时候我是拒绝的，因为通常在有href属性的时候，都是用 js 来禁止超链接的。 然鹅…CSS 里居然有 pointer-events¹这种黑科技！

a {
  pointer-events: none;
}

transform 垂直居中 ²

CSS 垂直居中一直是一个蛋疼的问题，常常需要用到，却没有一个所有浏览器，在所有情况下都适用的解决方案。等我以后有空了，应该专门写一篇讨论 CSS 垂直居中各种解决方案的博客……别问我以后是什么时候…XD

<style>
.bbb{
    position: relative;
    transform: translateY(-50%);
    top: 50%
}
</style>
<div class="aaa">
  <div class="bbb">qqq</div>
</div>

nth-child

通常一个列表里，总是回遇到需要高亮某几个 item 的情况，CSS 居然还可以通过公式来控制样式，我又涨姿势了。

以前只知道可以控制奇数偶数这种简单的，后来发现，只要是有规律的，能够写成 an+b 的公式，都可以适用nth-child³

• li:nth-child(even) 选中偶数
• li:nth-child(odd) 选中奇数
• li:nth-child(3n+2) 从第 2 个开始，每 3 个选中一个
• li:nth-child(3) 直选中第 3 个