CSS 選擇器 - 帶實例

前端css選擇器種類繁多，今天作了一下整理，不過該文章只適合前端小萌新，老油條請繞道。

1. 常見選擇器

1. 元素選擇器

a,p,div,li,ul{
	color:red;
}
/*頁面上全部的a,p,li,ul都會將字體顏色設置爲紅色，不過優先級最低*/
複製代碼

2. id選擇器

<p id="test">我會紅</p>
<style> #test{ color:red; } /*id選擇器經過id屬性來綁定一個惟一id，樣式經過# + ‘id’來實現關聯，優先級較高*/ </style>
複製代碼

3. 類選擇器

<p class="test">我會紅</p>
<style> .test{ color:red; } /*類選擇器經過class屬性來綁定一個類名，樣式經過. + ‘class’來實現關聯，優先級低於id選擇器*/ </style>
複製代碼

4. 屬性選擇器

<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,會提升樣式的優先級，不過不建議使用。若是是相同的優先級，則後寫的樣式會覆蓋前面寫的樣式。子選擇器的優先級低於直接選擇的優先級。多個類名的組合的優先級會高於單個類名的優先級。多級的子選擇器會比一級的子選擇器優先級高。

寫在最後： 想看更多文章，能夠關注個人我的公衆號：