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

Posted 韩曙亮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSSCSS 选择器 ② ( ID 选择器 | 通配符选择器 | 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 标签 ;

以上是关于CSSCSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )的主要内容,如果未能解决你的问题,请参考以下文章

csscss选择器,伪类

CSSCSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )

CSSCSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )

CSSCSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )

CSSCSS2和CSS3选择器总结(全部选择器种类及其优先级)

CSSCSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )