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

Posted 4 years ago · 1 mins reading

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

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

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

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

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

css
a {
pointer-events: none;
}

transform 垂直居中 2

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-child3

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