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>

posted on 2021-11-14 15:26 我不想一直当菜鸟阅读(219) 评论(0) 编辑收藏举报