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
    

        
 {{todo}}
    


    inbox
    
No Task

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

    

        
TODO
        ...
    
    

        
NEWS
        ...
    
   


   ...

先不论代码可读性，

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

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

    ...



    ...


   inbox
   
No Task

顾名思义，:first-child用于选取属于其父元素的首个子元素的指定选择器。通俗来说，first-child指的是该元素本事为长子时的状态。

样式表内容如下。当no-task类为首元素时，显示图标，其他形态下隐藏自身。

.no-task {
  display: none;
}

.no-task:first-child  {
  display: block;
}

除此之外，还有这么几个类似功用的伪类，大家有兴趣都可以去看一看：

• :last-child
• :first-of-type
• :last-of-type
• :nth-child
• :nth-last-child

CSS Counters

我发现很多同事学过CSS，但是知道CSS也能计数的并不多。只要回想一下

标签能产生从1~n的数值时，其实也不会觉得太奇怪了。

CSS计数器的值通过使用counter-reset 和 counter-increment 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

再以上面todo为例加一个计数器。

    
TODO
    

      
 {{item}}
    
    
    
 
  

使用CSS计数器之前，必须重置一个值（如：todo），默认是0。接着，每渲染一个

1. 元素，todo计数+1。最后在.counter:after的content里显示计数结果。（注意：content只出现在html伪元素::before或是::after里）

   section.to-dos {
     counter-reset: todo;  /* Set a counter named 'todo'*/
   }
   
   li.to-do {
     counter-increment: todo; /* Increment 'todo' counter by 1 */
   }
   
   .counter:after {
     content: counter(todo); /* Display the value of counter */
   }
   

   再稍微加工一下就可以实现如下功能了。请注意右上角的数字，这是利用CSS计数器动态生成的数值。

   todo counter

   :checked and :not(checked)

   我在浏览器default actions这一期里提到过用radio做互斥按钮。

   radio button

   这里就用到了input radio的:checked伪类。那unchecked呢？没有这个伪类，但是可以用否定伪类，:not(checked)。

   回忆一下上述互斥按钮的代码：

   
       {{item}}
       
           
           
   selected
           
   unselected
       
   
   

   列表项

2. 里的共享同一个name，形成互斥效果。点击后，内嵌的radio被置为:checked，其他radio自动变为:not(checked)。我们可以通过这个状态差异来让:checked的.selected兄弟可见，.unselected兄弟隐藏；反之，:not(checked)的.unselected兄弟可见，.selected兄弟隐藏。代码实现如下。是的，没有用到一点Javascript。

   input[type="radio"]:checked ~ .selected {
     display: block;
   }
   
   input[type="radio"]:checked ~ .unselected {
     display: none;
   }
   
   input[type="radio"]:not(checked) ~ .unselected {
     display: block;
   }
   
   input[type="radio"]:not(checked) ~ .selected {
     display: none;
   }
   

   checked, unchecked, and indeterminate.

   突然想到了一个很冷的知识：radio和checkbox一共有三种状态 checked、 unchecked和indeterminate。没错，还有一个中间态。checkbox三态如下所示。我记得早些年的QQ mail就利用过indeterminate制作过一个特殊效果。

   three status

   • checkbox的indeterminate只能通过JS来设置

     let checkbox = document.getElementById("checkbox")
     checkbox.indeterminate = true;
     

   • radio的话，当所有同名radio都未被选择时，它们呈现的状态叫indeterminate。

   总结

   CSS伪类是一个很有趣知识点，很多人觉得这个伪类太过奇技淫巧，甚至有哗众取宠之嫌。其实CSS伪类，还有html的伪元素有许多实用的功能，熟练掌握可以极大地简化html、减少JS的绑定。你的页面也将更加简洁优雅。