CSS 選擇器 - 帶例項
前端css選擇器種類繁多，今天做了一下整理，不過該文章只適合前端小萌新，老油條請繞道。
1. 常見選擇器
- 元素選擇器
a,p,div,li,ul{
color:red;
}
/*頁面上所有的a,p,li,ul都會將字型顏色設定為紅色，不過優先順序最低*/
複製程式碼
- id選擇器
<p id="test">我會紅</p>
<style>
#test{
color:red;
}
/*id選擇器通過id屬性來繫結一個唯一id，樣式通過# + ‘id’來實現關聯，優先順序較高*/
</style>
複製程式碼
- 類選擇器
<p class="test">我會紅</p>
<style>
.test{
color:red;
}
/*類選擇器通過class屬性來繫結一個類名，樣式通過. + ‘class’來實現關聯，優先順序低於id選擇器*/
</style>
複製程式碼
- 屬性選擇器
<a class="test" src='/test.html'>我會紅</a>
<style>
[src^="test"]{
color:blue;
}
.test[src]{
color:red;
}
/*屬性選擇器通過[attr=*]來選擇具有該屬性的元素，屬性值支援萬用字元(不做具體詳解)形式，優先順序較低，多種選擇器可以結合使用，上例中，後者優先順序高於前者，所以呈現的字型為紅色。*/
</style>
複製程式碼
2.子元素和後代元素選擇器
<p>我不會變色</p>
<ul>
<li>我是子元素<span>我是子子元素</span></li>
<li>我是第二個子元素</li>
<li>
<li>我是li裡面的li</li>
</li>
</ul>
<p>我會變紅</p>
<style>
ul li{
margin-left:20px;
}
/*通過空格隔開的方式選擇所有子元素，這樣，ul裡面的所有li都會應用到左邊距20px的樣式,包括li裡面的li*/
ul>li{
padding-left:20px;
}
/*通過選擇器 > 選擇器 來選擇直接子元素，意思是說，只有第一級的li會被應用成左內邊距20px,而li裡面的li不會被應用到。*/
ul + p{
background-colo:red;
}
/*通過 選擇器 + 選擇器 來選擇兄弟元素，這樣讓下面的p元素的背景色為紅色，而第一個p標籤的背景色不會變。*/
</style>
複製程式碼
3偽類選擇器
偽類專門用來表示元素的一種的特殊的狀態。 比如：訪問過的超連結，比如普通的超連結，比如獲取焦點的文字框。 當我們需要為處在這些特殊狀態的元素設定樣式時，就可以使用偽類。
:link,表示普通的連結（沒訪問過的連結） :visited,表示訪問過的連結 :hover,表示滑鼠移入的狀態 :active,表示的是超連結被點選的狀態 :focus,表示文字框獲取焦點 ps: :hover和:active也可以為其他元素設定(ie6不支援)
說明：普通標籤支援:hover,:focus,其他偽類只有一些特定的標籤才支援，比如說：a標籤支援:visited,:active,link；button支援:active,:focus。舉例：
<a class="test" src='/test.html'>我是連線</a>
<button>點我我就綠</button>
<style>
a:link{
color:blue;
}
/*連線未被訪問過，為blue顏色*/
a:visited{
color:red;
}
/*訪問之後，變成紅色*/
a:hover{
font-size:40px;
}
/*滑鼠一上去，字型變大*/
button:focus{
color:green;
}
/*點選按鈕，按鈕聚焦，會變成綠色*/
button:active{
color:red;
}
/*點選按鈕的過程中，按鈕顏色會變紅*/
</style>
複製程式碼
4偽元素選擇器
p:first-letter 作用：選擇p中第一個字元 p:first-line,選擇p中的第一行 :before,表示元素最前邊的部分， 一般before都需要結合content這個樣式一起使用，通過content可以向before或after的位置新增一些內容 :after,表示元素的最後邊的部分
5子元素偽類選擇器
:first-child 可以選中第一個子元素 :last-child 可以選中最後一個子元素 :nth-child(XXX) 可以選中任意位置的子元素,該選擇器後邊可以指定一個引數，指定要選中第幾個子元素,even 表示偶數位置的子元素,odd 表示奇數位置的子元素。 :first-of-type、:last-of-type、:nth-of-type和:first-child這些非常的類似，只不過child，是在所有的子元素中排列，而type，是在當前型別的子元素中排列
6優先順序
很明顯，上面多種選擇器直接，會存在交叉和衝突，很多地方庫，我們在引入的時候，需要覆蓋原來的樣式，這時候可以利用選擇器優先順序來覆蓋原來庫裡面的樣式。 元素選擇器 < 屬性選擇器 < 類名選擇器 < id選擇器。給樣式增加!important,會提高樣式的優先順序，不過不建議使用。如果是相同的優先順序，則後寫的樣式會覆蓋前面寫的樣式。子選擇器的優先順序低於直接選擇的優先順序。多個類名的組合的優先順序會高於單個類名的優先順序。多級的子選擇器會比一級的子選擇器優先順序高。
寫在最後： 想看更多文章，可以關注我的個人公眾號：
