用CSS3实现客户端的全文检索

        今天我们休息休息，讲讲简单的东西。

        使用data-属性作为索引，和一个用于检索的CSS3动态选择器，我们可以不需要JavaScript，直接实现客户端的全文检索功能。下面是一个示例：

        检索列表

  
  
  

    

      
First Name
Ona
      
Last Name
Bednar
      
Email
[email protected]
      
Phone
1-265-479-1196x714
    
  
  

    

      
First Name
Newton
      
Last Name
Cronin
      
Email
[email protected]
      
Phone
(121)644-5577
    
  
  

        搜索代码

        搜索功能的实现非常简单，它依赖于两个CSS3支持很好的选择器(:not()和 [attr*=])，以及每当搜索框输入内容改变时重写样式规则。

        使用CSS3选择器而不是JavaScript的indexOf()来实现检索功能是因为速度：当每次按键时你只改变一个元素（