css 伪类大全,CSS伪类

简介

CSS 伪类 (Pseudo-classes)是W3C里制定的一套选择器的特殊状态，有几十个之多。语法如下:

selector:pseudo-class {property: value;}

我们比较常见的有:link、:focus、:active等等。今天我来介绍几个比较有趣的伪类选择器，并在某些场景里实现一些酷炫的功能。

:first-child

前段时间在开发一个dashboard的页面，客户提了一个需求，当dashboard页面的todo为空时，显示no task图标。需求很简单，有todo时隐藏图标，没todo显示图标。

no task icon

我看了一下组里小朋友的实现，大体思路如下。很娴熟地使用了v-if条件渲染。

TODO

1. { {todo}}

inbox

No Task

不过后来dashboard里需要增加与todo同级的news了，然后代码就变成了这样：

TODO

...

NEWS

...

...

先不论代码可读性，判断语句会随着新条目的增加不断修改，从开放闭合原则的角度来说，这并不是很适宜。

其实，这个案例里用一个简单的CSS伪类:first-child就可以很好的满足需求。如下，为图标所在section添加一个no