2018-09-28 18:19:28 web秀

點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來！

前言

css選擇器非常之多，常見的如class選擇器，id選擇器，標籤選擇器等等。每個的用法都有所區別，雖然很多都能到達同樣的效果，但還是有一些更優的選擇。

class、id、標籤選擇器

這個幾個就不細說了，class和標籤選擇器主要用來設置樣式上面，id選擇器推薦不要用在css樣式上，更多是用在js操作dom時，選擇元素。

如：

div{
 background: #fff;
}
.list {
 color: red;
}

$('#li').html('web秀')

element element

div p 選擇

元素內部的所有

元素。

CSS選擇器如此之多，你瞭解多少？

element>element

div>p 選擇父元素為

元素的所有

元素。

CSS選擇器如此之多，你瞭解多少？

element+element

div+p 選擇緊接在

元素之後的所有

元素。

CSS選擇器如此之多，你瞭解多少？

[attribute]

[target] 選擇帶有 target 屬性所有元素。

CSS選擇器如此之多，你瞭解多少？

[attribute=value]

[target=_blank] 選擇 target="_blank" 的所有元素。

CSS選擇器如此之多，你瞭解多少？

[attribute~=value]

[title~=title] 選擇 title 屬性包含單詞 "title" 的所有元素。

CSS選擇器如此之多，你瞭解多少？

[attribute|=value]/[attribute^=value]

[lang|=en] 選擇 lang 屬性值以 "en" 開頭的所有元素。

CSS選擇器如此之多，你瞭解多少？

[attribute$=value]

p[src$="e"] 選擇其 src 屬性以 "e" 結尾的所有

元素。

CSS選擇器如此之多，你瞭解多少？

**[attribute*=value]**

p[title*="abc"] 選擇其 title 屬性中包含 "abc" 子串的每個

元素。

CSS選擇器如此之多，你瞭解多少？

element1~element2

p~div 選擇前面有

元素的每個

元素。

CSS選擇器如此之多，你瞭解多少？

A標籤偽類選擇器

:link a:link 所有未被訪問的鏈接(a標籤的默認樣式)。

:visited a:visited 所有已被訪問的鏈接。

:active a:active 點擊後沒有鬆開鼠標的鏈接。

:hover a:hover 鼠標指針位於其上的鏈接。

:before / :after

在元素的內容之前插入內容。

div:before{
 content: '';
 display: block;
 background: red;
 width: 30px;
 height: 10px;
}
div:after{
 content: '';
 display: block;
 background: green;
 width: 30px;
 height: 10px;
}

CSS選擇器如此之多，你瞭解多少？

:first-child

p:first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。(注意和:first-of-type做區分)

CSS選擇器如此之多，你瞭解多少？

:first-of-type

p:first-of-type 匹配的是該類型的第一個，類型是指什麼呢，就是冒號前面匹配到的東西，比如 p:first-of-type，就是指所有p元素中的第一個。這裡不再限制是第一個子元素了，只要是該類型元素的第一個就行了，當然這些元素的範圍都是屬於同一級的，也就是同輩的。(注意和:first-child做區分)