標籤：ima add mozilla yellow ext 標籤 .com 規則 epp
第一、CSS1選取器：
1、元素選取器（也叫標籤選取器，是最基本的選取器）
<style> html{background-color: red;} div{background-color: yellow;}</style>
2、ID選取器（id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。 id 選取器以 "#" 來定義）
<style> #boxl{color:blue;}</style>
2.1、結合元素的ID選取器：
<style>
/*ID是box的div標籤*/ div#box{ width: 100px; height: 100px; background: red; border: 3px solid black; }</style><body> <div id="box"></div> </body>
注意：在實際開發中，瀏覽器並不會檢測ID的唯一性，可以為相同元素的ID添加同一個樣式。如:
3、類別選取器（類選取器可以為class相同的 HTML 元素們指定特定的樣式。類別選取器以 "." 來定義）
<style> .head{ width: 100px; height: 100px; background: red; }</style
3.1、結合元素的ID選取器：
<style> /*class是head的div標籤*/ div.head{ width: 100px; height: 100px; background: red; }</style><body> <div class="head"></div> </body>
注意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
4、包含選取器（E F{}:選擇所有被E元素包含的F元素）
<style> /*三種選取器可以打亂順序任意組合*/ body div{ border: 3px solid #000000; } #outer #inner{ width: 100px; height: 100px; background: yellowgreen; } .body .head{ width: 100px; height: 100px; background: deeppink; }</style><body class="body" id="outer"> <div id="inner"></div> <div class="head"></div> </body>
代碼執行如：
5、分組選取器（E,F,G{}:選擇所有被E元素和F元素以及G元素）
<style>
/*將要分組的選取器放在規則左邊，並用逗號隔開。分組個數需要兩個及以上*/
div,p{ border: 3px solid #000000; } #box,#font{ width: 100px; height: 100px; background: #66FFFF; } .div,.p{ width: 100px; height: 100px; }</style><body> <div id="box" class="div"></div> <p id="font" class="p"></p> </body>
代碼運行效果如：
第二、CSS2選取器：
1、通配選取器（*{}:匹配所有元素）
<style> *{color: red;}</style>
運行效果:
2、通配選取器（*{}:匹配所有元素）
CSS1，CSS2選取器詳解
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
