標籤：元素 範圍 div 分表 定義 ffffff scale set red
css概述為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式完全交給CSS，html文檔變得更加簡潔。
css基本文法css的定義方法是：
選取器 { 屬性：值； 屬性：值； 屬性：值；}
選取器是將樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性，每個屬性有一個或多個值。屬性和值之間用冒號，一個屬性和值與下一個屬性和值之間用分號，最後一個分號可以省略，程式碼範例：
div{ width:100px; height:100px; background:gold; }
Css的三種選取器
第一種：
標籤選取器：標籤選取器，此種選取器影響範圍大，一般用來做一些通用設定，或用在層級選取器中。(受局限型比較大)
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 /*第一種選取器：標籤選取器，會選擇到頁面上所有同類型的標籤，局限性大，容易誤傷*/10 div{11 color: red;12 font-size: 30px;13 }14 </style>15 </head>16 <body>17 <body>18 <div class="bold">這是第一個div</div>19 </body>20 </body>21 </html>
第二種：
類別選取器：通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選取器。
例如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*第二種選取器:類別選取器,使用最多的選取器，一個類可以用在多個標籤上，一個標籤可以用多個類（類之間用空格隔開），使用非常靈活*/ .bold{ font-weight: bold; } .indent{ text-indent: 50px; } </style></head><body> <body> <div class="indent bold">這是第二個div</div> </body></body></html>
第三種：
層級選取器：主要應用在標籤嵌套的結構中，層級選取器，是結合上面的兩種選取器來寫的選取器,它可與標籤選取器結合使用，減少命名，同時也可以通過層級，限制樣式的作用範圍。
例如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*第三種選取器：層級選取器，符合此種層級關係的標籤才能被選中*/ .indent span{ font-family: ‘Times New Roman‘, Times, serif; color: slateblue; } </style></head><body> <body> <div class="indent bold">這是第二個<span>div</span></div> </body></body></html>
【CSS】CSS的三種選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
