CSS（Cascading層疊 Style樣式 sheets表），是用來為網頁添加樣式的代碼。
css選擇器的作用是用于選中元素，以便為其添加樣式
1.基礎選擇器

• 通用元素選擇器（*），通常用于取消瀏覽器自帶的樣式，不常用
• id選擇器（#id）
• class類選擇器（.class）
• 標簽選擇器（p）

2.組合選擇器
組合選擇器，E,F表示基礎選擇器
E,F 多元素選擇器，用逗號分割。同時匹配元素E和元素F
E F 后代選擇器，用空格分割。選擇E元素所有的后代中滿足F選擇器條件的元素（不只是子元素，子元素所有的后代）
E>F "子元素選擇器，用>分割。
選擇E元素所有的直接子元素中滿足F條件的元素"
E+F "直接相鄰選擇器，用+分割。
選擇E元素之后相鄰的下一個兄弟元素F，但要處于同一個父元素內"

E~F "普通相鄰選擇器（弟弟選擇器）。
選擇E元素之后的元素F（無論直接相鄰與否），但要處于同一個父元素內"

3.屬性選擇器
html由元素組成，元素由標簽（p/div等標簽），內容和屬性（例如class屬性，class="haha"表示class屬性的值為haha）組成。


可以通過標簽的屬性來選擇元素

<input type="password"> input[type=password]{ width:30px;} [href^="http://"] {background-color: #f0ad4e; } [src$="gif"] {border: 1px solid #ccc; }

4.偽類選擇器
常用的

• E:link 匹配E所有未被點擊的鏈接

• E:visited 匹配E所有已經被點擊的鏈接

• E:active 匹配鼠標已經其上按下，還沒有釋放的E元素

• E:hover 匹配鼠標懸停其上的E元素

//a標簽設置偽類時的順序比較重要，會產生樣式覆蓋。 //如果a：visited的樣式，放在最后，a鏈接被點擊之后，再hover或者active都不會生效。a{color:red;}a:visited{color:blue;}a:hover{color:green;}a:active{color:yellow;}

• E：focus 匹配處于焦點的元素

點擊輸入框等元素當光標閃爍可以輸入內容時，就說明輸入框處于焦點狀態

• E:enabled 匹配表單中可用的元素

• E:disabled 匹配表單中禁用的E元素

• E:checked 匹配表單中，被選中的radio或者checkbox元素

• E::selection 匹配用戶鼠標當前選中的元素，注意這里是由兩個冒號的

::selection{ color:red; } //被鼠標選中的文字會變紅

• E:first-child 匹配其父元素E的第一個子元素
• E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)
• E:nth-child(n) 匹配其父元素的第N個子元素，第一個標號為1，相當于E:first-child
• E:nth-last-child(n) 匹配其父元素的倒數第N個子元素，第一個編號為1

小tip：先找到E的父元素，再選擇它父元素下面第n個元素

• E:nth-of-type(n) 選擇滿足E選擇器的元素的父元素內，滿足E選擇器條件的子元素中不同種類型（類型是指標簽，如p標簽和div標簽是不同種類型）第N個子元素

小tip：先找到E的父元素，再選擇它父元素下面滿足E條件的元素，再選擇這些元素同種類型的第N個

• E:nth-last-of-type(n) 與nth-of-type(n) 作用類似，但是倒著匹配的

小tip：先找到E的父元素，再選擇它父元素下面滿足E條件的元素，再倒著選擇這些元素同種類型的第N個

• E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)

• E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)

5.偽元素選擇器
偽元素選擇器前面有兩個冒號（::），可以添加到選擇器的末尾以選擇元素的某個部分。

• E::first-line 匹配E元素內容的第一行

• E::first-letter 匹配E元素內容的第一個字母

• E::before 在E元素內部首位生成一個偽元素，插入生成的內容

可用于清除浮動，主要是簡化標簽

div::before{ content:"aa"; width:0px; }

• E::after 在E元素內部最后生成一個偽元素，插入生成的內容

6.選擇器優先級

• 普通場景

1、在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式

.child{ color:red !important; }

2、作為style屬性寫在元素標簽上的內聯樣式

3、id選擇器

4、類選擇器

5、偽類選擇器

6、屬性選擇器

7、標簽選擇器

8、通配符選擇器

9、瀏覽器自定義

• 復雜場景下：

標記為ABCD

1. 行內樣式:<div style="xxx"></div> ==>a2. id選擇器: ==>b3. 類，屬性選擇器和偽類選擇器 ==>c4. 標簽選擇器和偽元素選擇器 ==>d

然后根據選擇器去分類計算，最后先比較a的值，a相同就比較b，以此類推。數值更高，優先級更高！例如：

* {} /a=0 b=0 c=0 d=1/-> /0,0,0,1/p {} /a=0,b=0,c=0,d=1/-> /0,0,0,1/a:hover {} /a=0,b=0,c=1,d=1/-> /0,0,1,1/ul li {} /a=0,b=0,c=0,d=2/-> /0,0,0,2/h1+input[type=hidden]{} /a=0,b=0,c=1,d=2/-> /0,0,1,2/ul ol li.active {} /a=0,b=0,c=1,d=3/->/0,0,1,3/#ct .box p {} /a=0,b=1,c=1,d=1/-> /0,1,1,1/div#header:after {} /a=0,b=1,c=0,d=2/-> /0,1,0,2/style="" /a=1,b=0,c=0,d=0/ ->/1,0,0,0/

7.例子

<style>.box:first-child {color: red;/* 輸出第一個div.box變紅 */}.box:first-of-type {background: blue;/* 第一個div標簽的div.box 、p.box變藍背景 */}.box :first-child {font-size: 30px;/* .box后代第一個孩子div.item變成3opx */}.box :first-of-type {font-weight: bold;/* .box后代第一個div和p類型div.item和p.item變成粗體 */}</style><div class="container"><div class="box">div.box</div><p class="box">p.box</p><div class="box">div.box</div><div class="box"><div class="item">div.item</div><p class="item">p.item</p></div><p class="box"></p></div></body>

總結

以上是生活随笔為你收集整理的css之选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。