三种选择器的优先级：

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. ulimit.conf中soft和hard区别及常用配置
			
    在Linux中,ulimit命令用于限制用户对shell资源的访问,包括进程数.文件打开数等.这些限制可以分为软限制(soft limit)和硬限制(hard limit). 软限制(soft lim ...
    
			
    2. 
						
  2. Pod的优先级（priorityClass）和抢占策略（preemptionPolicy）
			
    Pod优先级 Pod优先级是一个用于指示Pod相对重要程度的整数值.优先级高的Pod在调度时会优先被考虑,并且在资源不足时,优先级较低的Pod可能会被驱逐以释放资源给优先级较高的Pod.Pod优先级的 ...
    
			
    3. 
						
  3. C# NAudio 播放多个MP3文件
			
    C# 使用 NAudio 来播放多个MP3文件.上代码 1.引入NAudio:using NAudio.Wave; 2.定义变量: private WaveOutEvent outputDevice; ...
    
			
    4. 
						
  4. Linux socket 摘要(一)
			
    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...
    
			
    5. 
						
  5. Python爬虫实战系列4：天眼查公司工商信息采集
			
    Python爬虫实战系列1:博客园cnblogs热门新闻采集 Python爬虫实战系列2:虎嗅网24小时热门新闻采集 Python爬虫实战系列3:今日BBNews编程新闻采集 Python爬虫实战系列 ...
    
			
    6. 
						
  6. 记录--npm, npx, cnpm, yarn, pnpm梭哈
			
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 依赖管理解决了在软件开发过程中管理和协调各种依赖项的问题,简化了开发流程,提高了项目的可靠性.可维护性和可重复性.它们帮助开发人员更高效地 ...
    
			
    7. 
						
  7. 替换Spring容器中已经存在的Bean
			
    一.背景 我们在开发的过程中,经常会引入别人写的jar包实现某些功能.而别人的jar包一般都自动注入Spring容器中,假设别人都是通过@Bean或@Component注入的,并且没有加入@Condi ...
    
			
    8. 
						
  8. 【Oracle】通过LogMiner实现Oracle数据同步迁移
			
    写在前面 最近在研究如何实现Oracle数据库之间的数据同步,网上的资料确实比较少.最好用的Oracle数据库同步工具是:GoldenGate ,而GoldenGate是要收费的.那么还有什么好的办法 ...
    
			
    9. 
						
  9. Ubuntu系统部署springcloud+nacos遇到的问题。
			
    1,部署上的jar包运行正常,但是通过浏览器不能访问,telnet +IP+端口连接不通.小皮面板访问后台接口也是不通但是小皮面板可以通过浏览器访问.具体问题暂未解决. 2,改用docker部署,将j ...
    
			
    10. 
						
  10. 【Learning eBPF-1】什么是 eBPF？为什么它很吊？
			
    本书中, eBPF 被称为一种 革命性的 内核技术,被广泛应用于网络.观测 和 安全工具中. 这种技术允许你在不重新编译内核的情况下,使能你的自定义工具,与内核数据进行交互.听起来很厉害. 1.1 追 ...
    
			
    11.