css/選擇器

一、標籤選擇器

　　<div>文本</div>

　　選擇器 : div { color: red }

二、類選擇器

　　<div  class="text">文本</div>

　　選擇器 : .text { color: red }

三、ID選擇器

　　<div  id="text">文本</div>

　　選擇器 : #text { color: red }

四、後代選擇器

　　<div>第一層

　　　　<p  class="second">第二層

　　　　　　<span  id="third'>第三層</span>

　　　　</p>

　　</div>

　　選擇器 : div  .second { color: green }

　　選擇器 : div   #third {  color: blue }

五、子代選擇器

　　<div>第一層

　　　　<p  class="second">第二層

　　　　　　<span  id="third'>第三層</span>

　　　　</p>

　　</div>

　　選擇器 : div  >  .second { color: green }

　　選擇器 : div  >  .second  >   #third {  color: blue }

六、兄弟相鄰選擇器

　　寫法：A+B{} 表示選擇A標籤後面相鄰的兄弟標籤B

　　<div>文本1</div>

　　<div>文本1</div>　　// 有邊框

　　<div>文本1</div>　　// 有邊框

　　選擇器 : div + div { border: 1px  solid  red }

七、兄弟選擇器

　　寫法: A~B{ }  表示選擇器A標籤後面 的兄弟標籤B，A標籤與B標籤能夠不相鄰

　　<div  class="box1">文本1</div>

　　<div  class="box2">文本1</div>　

　　<div  class="box3">文本1</div>　　// 有邊框

　　選擇器 : .box1 ~ .box3 { border: 1px  solid  red }

八、屬性選擇器　　

　　經過標籤的屬性 來選擇標籤

　　屬性選擇器自己 與 類選擇器權重相同

　　（1）[屬性名稱]

　　　　<div  class="box">文本1</div>

　　　　 [class] {color: red}

　　　　 div[class] {color: red}

　　（2）[屬性名稱=「屬性值」]

　　　　<div  class="box">文本1</div>

　　　　 [class="box"] {color: red}

　　　　 div[class="box"] {color: red}

八、僞類選擇器　　

　　選擇器上帶:號的 特徵大部分的就是僞類選擇器，僞類選擇器 是專門選擇一些狀態特徵內容

　　A:hover{ color:red }  表示鼠標移入到A標籤上的時候 選擇A標籤設置樣式爲字體 顏色紅色

　　<div  class="box">文本1</div>

　　div:hover{color: green}

九、css3選擇器

　　（1）first-child、last-child

　　　　　 A:first-child表示選擇標籤裏面 位置爲第一的子標籤A

　　　　　 B:last-child表示選擇標籤裏面 位置爲最後一個子標籤B

　　　　　　<div>

　　　　　　　　<span>111</span>

　　　　　　　　<span>222</span>

　　　　　　　　<span>333</span>

　　　　　　　　<span>444</span>

　　　　　　</div>

　　　　　　  div span:first-child{color: red}　　 //選擇第一個標籤

　　　　　　 div span:last-child{color: green}　　//選擇最後一個標籤

　　（2）nth-child( )

　　　　　　選擇奇數位置或偶數位置的標籤；從1開始

　　　　　　<div>

　　　　　　　　<span>111</span>　　　　

　　　　　　　　<span>222</span>　　　　

　　　　　　　　<span>333</span>　　　　

　　　　　　　　<span>444</span>　　　　

　　　　　　</div>

　　　　　　div span:nth-child(1){color: blue}　　//選擇第一個span標籤

　　　　　　div span:nth-child(3n+1){color: blue}　　//選擇第一、四、7...個span標籤

　　　　　　div span:nth-child(odd){color: red}　　 // 選擇奇數的span標籤

　　　　　　div span:nth-child(even){color: green}　　// 選擇偶數的span標籤

　　（3）first-of-type、last-of-type

　　　　　　A:first-of-type{ }  表示選擇標籤裏面  類型爲第一個的子標籤A

　　　　　　　A:last-of-type{ }  表示選擇標籤裏面  類型爲子標籤A的 最後一個標籤

　　　　　　　　<div>

　　　　　　　　<span>111</span>　　　　

　　　　　　　　<p>222</p>　　　// 紅色　

　　　　　　　　<b>333</b>　　　　

　　　　　　　　<p>444</p>　　　// 綠色　

　　　　　　  </div>

　　　　　　　div p:first-of -type{color: red}

　　　　　　  div p:last-of -type{color: green}

　　（4）nth-of-type( )

　　　　<div>

　　　　　　<span>111</span>　　　　

　　　　　　<p>222</p>　　　　

　　　　　　<b>333</b>　　　　

　　　　　　<p>444</p>　　　// 紅色　

　　　　 </div>

　　　　 div  p:nth-of-type(2) {color: red}

　　（5）not( )

　　　　排除某一類的選擇器

　　　　<span>111</span>　// 紅色　　　

　　　　<p>222</p>　　　　

　　　　<b>333</b>　　　// 紅色　

　　　　<p>444</p>

　　　　not([p]){color: red}

十、僞元素
　　<div  class="box">文本1</div>
　　div:before{
　　　　content: "前文本";
　　　　color: red
　　}

　　div:after{
　　　　content: "後文本";
　　　　color: red
　　}
　　僞元素使用hover

　　div:hover:after{　　// 鼠標移入div上，after標籤文本邊綠色
　　　　content: "後文本";
　　　　color: green
　　}

選擇器的權重比較：默認樣式 < 標籤名稱選擇器 < 類選擇器 < id選擇器 < style屬性樣式