3.CSS三种基本选择器
三种选择器的优先级:
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>