CSS中使用通配符来选择元素名称的技巧

最新推荐文章于 2025-09-28 10:35:15 发布
最新推荐文章于 2025-09-28 10:35:15 发布
阅读量340 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css 前端 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ScriptWELL/article/details/133009480
本文介绍了如何在CSS中利用通配符选择元素名称，包括选择以特定字符串开头、结尾或包含的元素，以及具有特定模式的元素。通过示例代码展示了四种通配符选择器的应用，帮助前端开发者更精确地样式化网页元素。

CSS是一种用于样式化网页元素的语言，它提供了各种选择器来选择特定的元素。而有时候，我们可能需要选择一组具有相似意义的元素，这时可以使用通配符来实现。

通配符是CSS选择器中的特殊字符，用于匹配元素名称的一部分或全部。在本文中，我们将探讨如何在元素名称中使用通配符来选择特定的元素，并提供相应的源代码示例。

  1. 选择以特定字符串开头的元素

如果我们想选择所有以相同前缀开头的元素，可以使用^符号。例如，如果我们想选择所有以"btn-"开头的类名的元素，可以使用以下代码：

[class^="btn-"] {
   
   
  /* 样式规则 */
}

上述代码中，[class^="btn-"]选择器将匹配所有类名以"btn-"开头的元素。你可以根据需要修改"btn-"来匹配其他前缀。

  1. 选择以特定字符串结尾的元素

类似地，如果我们想选择所有以相同后缀结尾的元素，可以使用$符号。例如，如果我们想选择所有以"-link"结尾的类名的元素，可以使用以下代码：


                

                
                
        

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
CSS中的通配符是什么？

				
			

			

				

					CyberByte的博客
				

				

					10-06
					
					448
					
				

			

		

		

			
				
总之，CSS中的通配符选择器（*）用于选择HTML文档中的所有元素。它可以与其他选择器结合使用，以选择特定条件下的元素，并为它们应用相应的样式规则。除了上述示例中的通用用法外，通配符选择器还可以与其他选择器结合使用，以选择特定条件下的元素。在上面的示例中，通配符选择器被用来设置所有元素的边距（margin）、内边距（padding）和框模型（box-sizing）。使用通配符选择器，可以对文档中的所有元素应用相同的样式规则。请注意，通配符选择器会选择文档中的每个元素，包括所有的标签元素（如。

			
		

	



                

            
              



	

		

			

				
					
CSS-超级详细的CSS选择器（基础选择器-关系选择器-伪类选择器）（基础篇中）

				
			

			

				

					weixin_43608968的博客
				

				

					09-10
					
					137
					
				

			

		

		

			
				
本章节介绍CSS选择器的各种类型，包括元素选择器、类选择器、ID选择器、通配符选择器、群组选择器，以及关系选择器（后代、子代、相邻兄弟和兄弟）、属性选择器和伪类/伪元素选择器，帮助读者理解和掌握CSS样式控制的高级技巧。

			
		

	



              


  
              

                


	

		

			

				
					
css通配符

				
			

			

				

					iteye_8029的博客
				

				

					08-11
					
					350
					
				

			

		

		

			
				
做前端的时候很难不会遇到浏览器的兼容问题，特别是遇到IE这种奇葩浏览器的时候。
浏览器兼容存在的一个问题是不同浏览器的标签默认的外补丁和内补丁不同，也是在IE存在的时候体现出来。这种情况下不加样式控制的情况下，各自的margin 和padding差异较大。解决方法是在CSS开头写一句 *{margin:0;padding:0;}。这是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文...

			
		

	





	

		

			

				
					
深入解析 CSS 中应用于类的“通配符选择器”（Attribute Selectors for Classes）

					
最新发布

				
			

			

				

					2501_93104808的博客
				

				

					09-28
					
					758
					
				

			

		

		

			
				
CSS中没有专门的"类通配符选择器"，但可以通过属性选择器实现类似功能。属性选择器[class*="value"]、[class^="value"]、[class$="value"]和[class~="value"]能分别匹配包含、开头、结尾或完整单词的类名。这些选择器与普通类选择器特异性相同，但性能略低。适用于有命名规则的类名、动态生成类名等场景，但建议优先使用标准类选择器。属性选择器为类名匹配提供了灵活的

			
		

	



		

			
		



	

		

			

				
					
CSS-通配符选择器

				
			

			

				

					qq_45438471的博客
				

				

					03-30
					
					749
					
				

			

		

		

			
				
本文主要介绍了CSS通配符选择器的用法。

			
		

	





	

		

			

				
					
css通配选择符

				
			

			

				

					LCY133的博客
				

				

					09-30
					
					529
					
				

			

		

		

			
				
通配选择符
在整个html文件当中如果想要选中所有元素，则用通配选择符；但通常使用去
掉所有边距，比如：*{margin:0;pading:0;}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			/*这个通配符

			
		

	





	

		

			

				
					
CSS - 通配符选择器

				
			

			

				

					qq_33962481的博客
				

				

					05-15
					
					2693
					
				

			

		

		

			
				
文章目录一、通配符选择器的使用1. 语法2. 注意

一、通配符选择器的使用
 在CSS中, 通配符选择器使用 “*” 定义, 它表示选取页面中所有元素
1. 语法
* {
	属性1: 属性值1;
	属性2: 属性值2;
}

2. 注意

通配符选择器不需要调用, 自动就给所有的元素使用样式


...

			
		

	





	

		

			

				
					
小程序or网页前端CSS选择器

				
			

			

				

					qq_45818845的博客
				

				

					11-07
					
					437
					
				

			

		

		

			
				
typora-copy-images-to: media


第01阶段.前端基础.CSS基础选择器

CSS选择器（重点）
1. CSS选择器作用（重点）

如上图所以，要把里面的小黄人分为2组，最快的方法怎办？
很多， 比如 一只眼睛的一组，剩下的一组
选择器的作用
​	找到特定的HTML页面元素

**CSS选择器干啥的？   选择标签用的， 把我们想要的标签选择出来 **  必须记住的

css 就是 分两件事， 选对人，  做对事。
h3 { 
	color: red;
}

这段代码就是2件事.

			
		

	





	

		

			

				
					
CSS 选择器

				
			

			

				

					LM9277的博客
				

				

					02-11
					
					1072
					
				

			

		

		

			
				
速通 CSS 选择器

			
		

	





	

		

			

				
					
【CSS基础】基础选择器+字体文本相关样式

				
			

			

				

					qq_59084325的博客
				

				

					09-12
					
					1638
					
				

			

		

		

			
				
【CSS基础】基础选择器+字体文本相关样式（超详细）

			
		

	





	

		

			

				
					
CSS基础选择器-标签/类/id/通配符

				
			

			

				

					m0_46688827的博客
				

				

					12-16
					
					721
					
				

			

		

		

			
				
CSS选择器

			
		

	





	

		

			

				
					
CSS选择器分类（ 通配符、标签选择器、id选择器、类选择器）

				
			

			

				

					m0_71814235的博客
				

				

					06-27
					
					658
					
				

			

		

		

			
				
CSS选择器分类（标签选择器、id选择器）

			
		

	





	

		

			

				
					
CSS——多类名选择器，id选择器，通配符选择器

				
			

			

				

					流楚丶格念的博客
				

				

					06-26
					
					6897
					
				

			

		

		

			
				
文章目录多类名选择器案例id选择器id选择器和类选择器区别案例通配符选择器案例
多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。
注意：

样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</d

			
		

	





	

		

			

				
					
零基础CSS入门教程(6)——通配符选择器

				
			

			

				

					weixin_61808806的博客
				

				

					12-07
					
					1164
					
				

			

		

		

			
				
我们上几节课学习了id选择器和class选择器，那我们这一小节学习一下通配符选择器。我们这里说的通配符选择器也是全选选择器，这个选择器的通途一般是在，清除浏览器默认样式时候使用。
效果如下
通配符选择器也叫全选选择器，我们一般会在清除浏览器默认格式的时候使用。

			
		

	





	

		

			

				
					
CSS系列(6)  CSS通配符详解

				
			

			

				

					weixin_30760895的博客
				

				

					08-29
					
					402
					
				

			

		

		

			
				
通配符使用星号*表示，意思是“所有的”。

平时使用电脑，比如要搜索C盘里所有的网页，可以使用 *.html来搜索，.html是网页的后缀名，*代表了所有网页的名称；

也就是使用 * 加后缀名，就可以在电脑中搜索文件。

在CSS中，同样使用 * 代表所有的标签或元素，它叫做通配符选择器。

比如：* { color : red; } 这里就把所有元素的字...

			
		

	





	

		

			

				
					
07-(CSS基础)通配符选择器

				
			

			

				

					我们的目标是星辰大海！
				

				

					04-04
					
					152
					
				

			

		

		

			
				
07-(CSS基础)通配符选择器

			
		

	





	

		

			

				
					
[你必须知道的css系列]第一回：丰富的利器：CSS选择符之通配符、类选择符、包含选择符、ID选择符...

				
			

			

				

					weixin_34121304的博客
				

				

					03-26
					
					158
					
				

			

		

		

			
				
一般没有系统的学习过，只是在网上看一些片断教程的人。见到最多的可能也就是：
元素选择符（例如：body 、a 、li ） ID选择符（例如：#head、#body、#foot） 类选择符（例如：.red、.item、.content） 
今天我们把所有的选择符统统拿出来说个遍。
1)通配符选择符
　　所谓通配符其实只是一个星号而已，但这么一个简单的星号作用却是很强大的。通配符一般用来对页面...

			
		

	





	

		

			

				
					
CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？

					
热门推荐

				
			

			

				

					Shmily_ox的博客
				

				

					03-07
					
					5万+
					
				

			

		

		

			
				
CSS常用选择器
CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！
一、通配符选择器
通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。
基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}
例子
使用该选择器定义样式，清除所有HTML标记的默认边距。
*{
margin：0；       /*定义...

			
		

	





	

		

			

				
					
css伪元素与通配符

				
			

			

				

					zwy122的博客
				

				

					01-06
					
					557
					
				

			

		

		

			
				
问题描述：








解决：
1. 通配符







通配符使用星号*表示，意思是“所有的”。

 

平时使用电脑，比如要搜索C盘里所有的网页，可以使用 *.html来搜索，.html是网页的后缀名，*代表了所有网页的名称；

 

也就是使用 * 加后缀名，就可以在电脑中搜索文件。








在CSS中，同样

			
		

	





	

		

			

				
					
网页美化技巧：深入学习CSS的使用方法

				
			

			

				

					
				

			

		

		

			
				
- 元素选择器：通过HTML标签名称来选择元素，如p选择所有段落元素。 - 通配符选择器：使用*选择所有元素。 - 属性选择器：基于元素的属性和属性值来选择元素。  4. CSS盒模型  CSS盒模型是理解和设计布局的基础。每...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
             | 博主筛选后可见
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值