文章目录

• 一、 ID 选择器
• • 1、简介
  • 2、代码示例
• 二、通配符选择器
• • 1、简介
  • 2、代码示例
• 三、CSS 选择器使用注意事项

一、 ID 选择器

1、简介

ID 选择器 使用 " #id " 选择 指定的 某一个 标签 , 使用 ID 选择器 步骤如下 :

• 首先 , 在 HTML 中 设置 标签的 ID ;

	p id="name">
    标签内容/p>
    

• 然后 , 在 CSS 样式中使用 ID 选择器 ;

	#name  {
       
		color: blue;
    
	  	font-size:20px;
  
	}
    

在一个 HTML 页面中 , 标签的 ID 是唯一的 , 不允许重复 ;

** ID 选择器 与 类选择器 的使用方法基本一致 ; **

在开发时 , ID 选择器 不推荐使用 , 使用频率不高 , 推荐使用 类选择器 ;

2、代码示例

代码示例 :

!DOCTYPE html>
     
html lang="en">
    
	head>
        
		meta charset="UTF-8" />
     
        title>
    Google/title>
    
		base target="_blank"/>
    
        style>

			.fontsize80 {
    
				font-size: 80px;

			}

			#blue {
    
				color: blue;

			}

			#red {
    
				color: red;

			}

			#orange {
    
				color: orange;

			}

			#green {
    
				color: green;

			}
    
        /style>
    
    /head>
    
    body>
    
		span class="fontsize80" id="blue">
    G/span>
    
    	span class="fontsize80" id="red">
    o/span>
    
    	span class="fontsize80" id="orange">
    o/span>
    
    	span class="fontsize80" id="blue">
    g/span>
    
    	span class="fontsize80" id="green">
    l/span>
    
    	span class="fontsize80" id="red">
    e/span>
    
    /body>
    
/html>
    

运行效果 :

二、通配符选择器

1、简介

通配符选择器 * 可以 选择所有标签 ;

语法如下 : 下面的样式会 将 html 中所有的标签都设置如下 样式 ;

	* {
       
		color: blue;
    
	  	font-size:20px;
  
	}
    

通配符选择器 会降低 页面的 打开速度 , 如果没有特殊情况 , 不推荐使用 ;

2、代码示例

通配符选择器代码示例 : 使用通配符选择器 * 将 HTML 所有页面标签的文本设置成了 黑色 ;

!DOCTYPE html>
     
html lang="en">
    
	head>
        
		meta charset="UTF-8" />
     
        title>
    Google/title>
    
		base target="_blank"/>
    
        style>

			.fontsize80 {
    
				font-size: 80px;

			}

			* {
    
				color: black;

			}
    
        /style>
    
    /head>
    
    body>
    
		span class="fontsize80" id="blue">
    G/span>
    
    	span class="fontsize80" id="red">
    o/span>
    
    	span class="fontsize80" id="orange">
    o/span>
    
    	span class="fontsize80" id="blue">
    g/span>
    
    	span class="fontsize80" id="green">
    l/span>
    
    	span class="fontsize80" id="red">
    e/span>
    
    /body>
    
/html>
    

运行效果 :

三、CSS 选择器使用注意事项

CSS 选择器使用注意事项 :

• 尽量不使用 ID 选择器 ;
• 尽量不使用 通配符选择器 ;
• 使用标签选择器时 , 尽量不对 无意义的标签 进行选择 , 如 div , span 标签 ;

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！