css给输入框里的字加背景色（CSS中通配输入文字的小技巧——如何在元素名中包含通配符）

CSS中    
    
    
    ，*的作用是通配表示“全部  
    
    
    
”  
    
    
    
。遗憾的是   


     


     


     


，并没有一种通配元素名的方法

     


     


     


    。

例如



 




 




 




，我有好几个东西class都标记为了my-element-序号   

   

   

   ，就像这样：

<p class="my-element-1"></p> <p class="my-element-2"></p> <p class="my-element-3"></p> ...

我现在希望让所有这些class的东西都应用同一个css规则 




 




 




 


。可惜    

     

     

     

，css并不支持这么一种写法：

.my-element-* { }

那怎么办呢？实际上




  




  




  




，css针对元素名等名字也可以实现通配  


  


  


  ，技巧是这么写：

[class^="my-element-"] { }

就是这样  

   

   

   

。

“^=

     


     


     


    ”的意思是：“以等号后面内容开头的所有 




 




 




 


”

     

     

     

   。那么这样写     
     
     
     
，规则就可以生效到所有以"my-element-"开头的class  




  




  




  

。

同理还有两种：

“$=  

   

   

   

”：以等号后面内容结束的所有

“*=

     

     

     

   ”：包含等号后面内容的所有

就此




   




   




   




，我们在css中希望通配应用到好几个元素上
 



 



 



 ，就可以用这种方式实现了  


  


  


  


。

这种写法应用的是Attribute Selector
     
     
     
  。可参考mozilla的文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

开发者们一般建议                    ，应用这种方式时 




    




    




    




，html里不写做class
















，而是自己起一个data-tagname
   




   




   




   
。就像这样：

<p data-tagname="my-element-1"></p> <p data-tagname="my-element-2"></p> <p data-tagname="my-element-3"></p> ... [data-tagname^="my-element-"] { }

这样可以实现更好的容错 



 



 



 



。

就是这样                 。

参考资料：https://stackoverflow.com/questions/30445913/css-wildcard-element-name-selection