2022.4.6 基本选择器

基本选择器

标签选择器

选择一类标签 ，格式 ： 标签{}

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>标签选择器</title>
 6      <style>
 7          h1{
 8              /*颜色*/
 9              color: red;
10              /*背景颜色*/
11              background: green;
12              /*圆角边框   数字为圆角大小*/
13              border-radius: 24px;
14          }
15          p{
16              /*字体大小*/
17              font-size: 80px;
18          }
19      </style>
20  ​
21  </head>
22  <body>
23  ​
24  <h1>java</h1>
25  <h1>c</h1>
26  <p>python</p>
27  ​
28  </body>
29  </html>

类选择器class

选择所有class属性一致的标签，跨标签，格式：.class的属性值{} 

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>类选择器</title>
 6  ​
 7      <style>
 8      /*类选择器格式：.class的属性值{}*/
 9      .name1{
10          color: #8d3a3a;
11      }
12      .name2{
13          color: #ff3139;
14      }
15  ​
16      </style>
17  ​
18  </head>
19  <body>
20  <h1 class="name1">标题1</h1>
21  <h1 class="name2">标题2</h1>
22  <h1>标题3</h1>
23  ​
24  ​
25  <p class="name1">p标签</p>
26  ​
27  </body>
28  </html>

id选择器

全局唯一 格式： #id属性值{}

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>id选择器</title>
 6      <style>
 7        /*id选择器：全局唯一
 8        格式：  #id名称{}
 9        */
10        #name1{
11            color: #ff36fb;
12        }
13        .name2{
14            color: #5dff4c;
15        }
16      /*不遵循就近原则   id选择器>类选择器>标签选择器*/
17      </style>
18  ​
19  </head>
20  <body>
21  ​
22  <h1 id="name1">哈哈</h1>
23  <h1 class="name2">你好</h1>
24  <h1 class="name2">你们好</h1>
25  <h1>你好呀</h1>
26  ​
27  </body>
28  </html>

 

优先级：不遵循就近原则 id选择器>类选择器>标签选择器

posted @ 2022-04-07 15:30  暴躁C语言  阅读(40)  评论(0)    收藏  举报