css樣式的六種選擇器
css常用的選擇器有：
1.標簽選擇器：
標簽選擇器，這種選擇器影響範圍大，建議盡量應用在層級選擇器中。
如：
*{margin:0;padding:0} /* 影響所有的標簽 */
div{color:red} /* 影響所有的div標簽 */
<div>......</div> <!-- 對應以上兩條樣式 -->
<div class=”box”>......</div> <!-- 對應以上兩條樣式 -->
2.id選擇器：
通過id名來選擇元素，元素的id名稱不能重復，所以一個樣式設置項只能對應於頁面上一個元素，不能復用，
id是所有標簽的屬性，所有標簽都有id屬性，寫代碼時id的值是不允許重復的
如：
#box{color:red}
<div id=”box”>......</div> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
3.類選擇器：（常用）
通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可復用，是css中應用最多的一種選擇器。
如：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class=”red”>......</div>
4.層級選擇器：
主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標簽元素結合使用，減少命名，同時也可以通過層級，防止命名沖突。
如：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class=”box”>
<span>......</span>
<a href=”#” class=”red”>......</a>
</div>
<h3 class=”red”>......</h3>
層級選擇器最好不要超過四層，否則會影響性能。
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>層級選擇器</title> <style type="text/css"> .box{ font-size:20px; line-height:40px; text-indent:40px; } .box span{ color:red; font-weight:bold; } .box em{ font-style:normal; text-decoration:underline; font-weight:bold; color:pink; } .box .span02{ color:blue; } </style> </head> <body> <div class="box"> <!-- 層級選擇器最好不要超過四層 --> 層級選擇器主要應用於選擇父元素下的<span>子元素</span>，或者子元素下面的<span class="span02">子元素</span>， 可與標簽元素結合使用，減少命名，同時也可以通過層級，<em>防止命名沖突</em>。 </div> <div class="box2"> 層級選擇器主要應用於選擇父元素下的<span>子元素</span>，或者子元素下面的子元素， 可與標簽元素結合使用，減少命名，同時也可以通過層級，防止命名沖突。 </div> </body> </html>
5.組選擇器：
多個選擇器，如果有同樣的樣式設置，可以使用組選擇器。
（組選擇器之間用逗號分隔；層級選擇器之間用空格分隔）
如：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
6.偽類及偽元素選擇器：
常用的偽類選擇器有hover，表示鼠標懸浮在元素上時的狀態，偽元素選擇器有before和after，它們可以通過樣式在元素中插入內容。
一般用在鏈接的響應
如：
.box1:hover{color:red}
.box2:before{content:’行首文字’;}
.box3:after{content:’行尾文字’;}
<div class=”box1”>......</div>
<div class=”box2”>......</div>
<div class=”box3”>......</div>
<div class=”box1”>......</div>
<div class=”box2”>......</div>
<div class=”box3”>......</div>
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類和偽元素選擇器</title> <style type="text/css"> .link{ font-size:30px; text-decoration:none; color:green; } .link:hover{ /* 偽類選擇器 鼠標懸浮時 */ color:gold; font-weight:bold; font-style:italic; } .box01,.box02{ font-size:20px; } .box01:before{ /* 偽元素選擇器 在偽元素前加一些內容,此添加的內容頁面上是選不中的 */ /*content:"前面的文字";*/ content:"."; /* 偽元素前加上一個. */ color:red; } .box02:after{ content:">>End"; color:gold; } </style> </head> <body> <a href="https://www.baidu.com" class="link">百度一下</a> <div class="box01">這是第一個div</div> <div class="box02">這是第二個div</div> </body> </html>
css樣式的六種選擇器