1. 程式人生 > 其它 >2022.4.6 基本選擇器

2022.4.6 基本選擇器

基本選擇器

標籤選擇器

選擇一類標籤 ,格式 : 標籤{}

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>標籤選擇器</title>
     <style>
         h1{
             /*顏色*/
             color: red;
             /*背景顏色*/
             background: green;
             /*圓角邊框   數字為圓角大小*/
             border-radius: 24px;
        }
         p{
             /*字型大小*/
             font-size: 80px;
        }
     </style>
 
 </head>
 <body>
 
 <h1>java</h1>
 <h1>c</h1>
 <p>python</p>
 
 </body>
 </html>

類選擇器class

選擇所有class屬性一致的標籤,跨標籤,格式:.class的屬性值{}

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>類選擇器</title>
 
     <style>
     /*類選擇器格式:.class的屬性值{}*/
     .name1{
         color: #8d3a3a;
    }
     .name2{
         color: #ff3139;
    }
 
     </style>
 
 </head>
 <body>
 <h1 class="name1">標題1</h1>
 <h1 class="name2">標題2</h1>
 <h1>標題3</h1>
 
 
 <p class="name1">p標籤</p>
 
 </body>
 </html>

id選擇器

全域性唯一 格式: #id屬性值{}

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>id選擇器</title>
     <style>
       /*id選擇器:全域性唯一
      格式: #id名稱{}
      */
       #name1{
           color: #ff36fb;
      }
       .name2{
           color: #5dff4c;
      }
     /*不遵循就近原則   id選擇器>類選擇器>標籤選擇器*/
     </style>
 
 </head>
 <body>
 
 <h1 id="name1">哈哈</h1>
 <h1 class="name2">你好</h1>
 <h1 class="name2">你們好</h1>
 <h1>你好呀</h1>
 
 </body>
 </html>

優先順序:不遵循就近原則 id選擇器>類選擇器>標籤選擇器