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