三种选择器的优先级：

id选择器 > class选择器 > 标签选择器

1.标签选择器：会选择到页面上所有的该类标签的元素

格式：

标签{}

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>标签选择器</title>

 6     <style>

 7         /*标签选择器，会选择到页面上所有的这个标签的元素*/

 8         h1{

 9             color: #66fd01;

10             background:#3cbda6;

11             border-radius: 23px;

12         }

13         p{

14             font-size: 23px;

15         }

16     </style>

17 </head>

18 <body>

19 <h1>学习java</h1>

20 <h1>你今天学习了吗？</h1>

21 <p>听网课学习css</p>

22 </body>

23 </html>

2.类选择器：可以多个标签归类，是同一个class,可以复用,可以跨标签

   格式:

.class的名称{}

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>类选择器</title>

 6     /*类选择器的格式

 7          .class的名称{}

 8        优点：可以多个标签归类，是同一个class,可以复用,可以跨标签

 9     */

10        <style>

11            .lm{

12                color: coral;

13            }

14            .lz{

15                color: hotpink;

16            }

17        </style>

18

19 </head>

20 <body>

21 <h1 class="lm">我是标题1</h1>

22 <h1 class="lz">我是标题2</h1>

23 <h1 class="lm">我是标题3</h1>

24  <p class="lz">另一个标签</p>

25 </body>

26 </html>

3.id选择器:id必须保证全局唯一，不遵循就近原则

 格式: 
 #id名称{}
 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>id选择器</title>

 6     /*

 7        id选择器：id必须保证全局唯一，不遵循就近原则

 8         格式:  #id名称{}

 9         优先级：

10          id选择器  > class选择器 > 标签选择器

11     */

12       <style>

13           #style1{

14               color: #3cbda6;

15           }

16           #style2{

17               color: hotpink;

18           }

19           .lm{

20               color: blue;

21           }

22           h1{

23               color: crimson;

24           }

25       </style>

26 </head>

27 <body>

28 <h1 id="style1" class="lm">标题1</h1>

29 <h1 id="style2">标题2</h1>

30 <h1>标题3</h1>

31 <h1>标题4</h1>

32 </body>

33 </html>
												


											
3.CSS三种基本选择器的更多相关文章
	

    
						
  1. CSS三种写法的优先级
		
    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
    
		
    2. 
						
  2. 前端 CSS 三种引入方式
		
    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
    
		
    3. 
						
  3. Python 45 css三种引入方式以及优先级
		
    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...
    
		
    4. 
						
  4. CSS三种样式
		
    CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...
    
		
    5. 
						
  5. css三种样式表写法
		
    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...
    
		
    6. 
						
  6. 006 CSS三种引入方式
		
    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
    
		
    7. 
						
  7. css三种引入方式以及其优先级的说法
		
    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...
    
		
    8. 
						
  8. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）
		
    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
    
		
    9. 
						
  9. 设置css三种方法的优先级
		
    有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...
    
		
    10. 
						
  10. CSS三种插入样式表格式
		
    首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. python tkinter - pickle 持久化
			
    查看当前python版本命令 cmd - python 现在当前版本是 3.8.8 tkinter - tool kits interface
    
			
    2. 
						
  2. 基于泰凌微2.4G私有协议TLSR8359的遥控器解决方案之源码解析
			
    一 2.4G私有协议 在无线遥控和远距离无线通信领域,2.4G私有协议有着天然的优势.成本低,发射功率大,功耗低.这让它在远距离无线遥控飞机,遥控车等领域有着广泛的应用.基于TLSR8359市场上广泛 ...
    
			
    3. 
						
  3. 手爱图仕Aputure MC RGB摄影补光灯体验测评
			
    前记  作为一个智能硬件设备狂兼智能硬件方案提供商,工作就是和各种智能硬件打交道.最近无意入手了一个爱图仕Aputure MC RGB摄影补光灯.顺便体验了几天,既然体验了,肯定要写一个体验结果的.这 ...
    
			
    4. 
						
  4. 大年学习linux（第三节---用户管理）
			
    三.用户管理 用户和用户组操作命令 ld Finger Pwck 检查/etc/passwd配置文件内的信息与实际主文件夹是否存在,还可比较/etc/passwd和/etc/shadow的信息是否一致 ...
    
			
    5. 
						
  5. 聊聊ShareGPT格式的微调数据集
			
    转载请注明住处:https://www.cnblogs.com/zhiyong-ITNote 概述 ShareGPT格式的数据集中,一般是如下格式: [ { "conversations&q ...
    
			
    6. 
						
  6. golang gc的内部优化
			
    今天讲一个常见的gc compiler(也就是官方版本的go编译器和runtime)在垃圾回收的扫描标记阶段做的优化. 我对这个优化的描述印象最深的是在bigcache的注释里,大致内容是如果map的 ...
    
			
    7. 
						
  7. 高防dns和高防IP一样吗？
			
    高防DNS和高防IP一样吗? 高防DNS和高防IP在功能和目标上有所不同,因此它们并不完全相同. 高防DNS是一种针对DNS服务的防护措施,旨在保护域名解析免受DDoS攻击等网络威胁的影响.它利用高防 ...
    
			
    8. 
						
  8. multisim的支路及总线设计
			
    Multisim的支路及总线设计 1.实验原理 最近在使用multisim设计时,用到了总线和支路设计,这里记录一下,方便以后查阅相关操作.其中主要是总线的使用和支路连接器的使用. 2.实验操作 (1 ...
    
			
    9. 
						
  9. P9966 [THUPC 2024 初赛] 机器人 题解
			
    细节大模拟. 题意 一堆机器人在一起,每个人有左右手和一些指令,依次执行并输出结果. 做法 首先这种指令的执行还算是比较简单的大模拟,一个个实现即可,在此给出我的定义. struct Robot{ i ...
    
			
    10. 
						
  10. C++设计模式 - 策略模式（Strategy）
			
    组件协作模式: 现代软件专业分工之后的第一个结果是"框架与应用程序的划分","组件协作"模式通过晚期绑定,来实现框架与应用程序之间的松耦合,是二者之间协作时常用 ...
    
			
    11.