【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )

韩曙亮

发布于 2023-03-30 19:14:31

2.7K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、 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>

运行效果 :