你也許已經掌握了id、class、後臺選擇器這些基本的css選擇器。但這遠遠不是css的全部。下面向大家系統的解析css中30個最常用的選擇器，包括我們最頭痛的瀏覽器兼容性問題。掌握了它們，才能真正領略css的巨大靈活性。
1. *
* {
margin: 0;
padding: 0;
}
星狀選擇符會在頁面上的每一個元素上起作用。web設計者經常用它將頁面中所有元素的margin和padding設置爲0。*選擇符也可以在子選擇器中使用。
#container * {
border: 1px solid black;
}
上面的代碼中會應用於id爲container元素的所有子元素中。除非必要，我不建議在頁面中過的的使用星狀選擇符，因爲他的作用域太大，相當耗瀏覽器資源。
兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
2. #X
#container {
width: 960px;
margin: auto;
}
井號作用域有相應id的元素。id是我們最常用的css選擇器之一。id選擇器的優勢是精準，高優先級（優先級基數爲100，遠高於class的10）， 作爲javascript腳本鉤子的不二選擇，同樣缺點也很明顯優先級過高，重用性差。
所以在使用id選擇器前，我們最好問下自己，真的到了非用id選擇 器的地步？
兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
3. .X
.error {
color: red;
}
這是一個class(類)選擇器。class選擇器與id選擇器的不同是class選擇器能作用於期望樣式化的一組元素。
兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
4. X Y
li a {
text-decoration: none;
}
這也是我們最常用的一種選擇器——後代選擇器。
用於選取X元素下子元素Y，要留意的點是，這種方式的選擇器將選取其下所有匹配的子元素，無視層級，所以有的情況是不宜使用的，比如上述的代碼去掉li下的所有a的下劃線，但li裏面還有個ul，我不希望ul下的li的a去掉下劃線。
使用此後代選擇器的時候要 考慮是否希望某樣式對所有子孫元素都起作用。這種後代選擇器還有個作用，就是創建類似命名空間的作用。比如上述代碼樣式的作用域明顯爲li。
兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
5. X
a { color: red; }
ul { margin-left: 0; }
標籤選擇器。使用標籤選擇器作用於作用域範圍內的所有對應標籤。優先級僅僅比*高。
兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
6. X:visited和X:link
a:link { color: red; }
a:visted { color: purple; }
使用:link僞類作用於未點擊過的鏈接標籤。:hover僞類作用於點擊過的鏈接。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
7. X+Y
ul + p {
color: red;
}
相鄰選擇器，上述代碼中就會匹配在ul後面的第一個p，將段落內的文字顏色設置爲紅色。(只匹配第一個元素)
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
8. X>Y
div#container > ul {
border: 1px solid black;
}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
子選擇器。與後代選擇器X Y不同的是，子選擇器只對X下的直接子級Y起作用。在上面的css和html例子中，div#container>ul僅對container中最近一級的ul起作用。從理論上來講X > Y是值得提倡選擇器，可惜IE6不支持。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
9. X ~ Y
ul ~ p {
color: red;
}
相鄰選擇器，與前面提到的X+Y不同的是，X~Y匹配與X相同級別的所有Y元素，而X+Y只匹配第一個。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
10. X[title]
a[title] {
color: green;
}
屬性選擇器。比如上述代碼匹配的是帶有title屬性的鏈接元素。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
11. X[title="foo"]
a[href="http://css9.net"] {
color: #1f6053;
}
屬性選擇器。上面的代碼匹配所有擁有href屬性，且href爲http://css9.net的所有鏈接。
這個功能很好，但是多少又有些侷限。如果我們希望匹配href包含css9.net的所有鏈接該怎麼做呢？看下一個選擇器。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
12. X[title*="css9.net"]
a[href*="css9.net"] {
color: #1f6053;
}
屬性選擇器。正如我們想要的，上面代碼匹配的是href中包含"css9.net"的所有鏈接。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
13. X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
屬性選擇器。上面代碼匹配的是href中所有以http開頭的鏈接。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
13. X[href$=".jpg"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
屬性選擇器。在屬性選擇器中使用$，用於匹配結尾爲特定字符串的元素。在上面代碼中匹配的是所有鏈接到擴展名爲.jpg圖片的鏈接。（注意，這裏僅僅是.jpg圖片，如果要作用於所有圖片鏈接該怎麼做呢，看下一個選擇器。）
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
14. X[data-*="foo"]
在上一個選擇器中提到如何匹配所有圖片鏈接。如果使用X[href$=".jpg"]實現，需要這樣做：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
看上去比較麻煩。另一個解決辦法是爲所有的圖片鏈接加一個特定的屬性，例如‘data-file’
html代碼：
<a href="path/to/image.jpg" data-filetype="image"> 圖片鏈接 </a>
css代碼如下：
a[data-filetype="image"] {
color: red;
}
這樣所有鏈接到圖片的鏈接字體顏色爲紅色。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
15. X[foo~="bar"]
屬性選擇器。屬性選擇器中的波浪線符號可以讓我們匹配屬性值中用空格分隔的多個值中的一個。看下面例子：
html代碼
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css代碼
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
在上面例子中，匹配data-info屬性中包含“external”鏈接的字體顏色爲紅色。匹配data-info屬性中包含“image”的鏈接設置黑色邊框。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked僞類用來匹配處於選定狀態的界面元素，如radio、checkbox。
input[type=radio]:checked {
border: 1px solid black;
}
上面代碼中匹配的是所有處於選定狀態的單選radio，設置1px的黑色邊框。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
這兩個僞類與content結合用於在元素的前面或者後面追加內容，看一個簡單的例子：
h1:after {content:url(/i/logo.gif)}
上面的代碼實現了在h1標題的後面顯示一張圖片。
我們也經常用它來實現清除浮動，寫法如下：
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
此示例使用：after僞類在元素後面附加一個空格，然後清除它。
根據CSS3 Selectors規範，從技術上講，您應該使用兩個冒號::的僞元素語法。但是，爲了保持兼容，用戶代理也將接受單個冒號用法。實際上，在這一點上，在項目中使用單冒號版本更爲明智。
兼容瀏覽器：IE8+、Firefox、Chrome、Safari、Opera
19. X:hover
div:hover {
background: #e3e3e3;
}
:hover僞類設定當鼠標劃過時元素的樣式。上面代碼中設定了div劃過時的背景色。
需要注意的是，在ie 6中，:hover只能用於鏈接元素。
這裏分享一個經驗，在設定鏈接劃過時出現下滑線時，使用border-bottom會比text-decoration顯得更漂亮些。代碼如下：
a:hover {
border-bottom: 1px solid black;
}
兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector)
div:not(#container) {
color: blue;
}
否定僞類選擇器用來在匹配元素時排除某些元素。在上面的例子中，設定除了id爲container的div元素字體顏色爲blue。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
我們可以使用僞元素（由::標記）來設置元素片段的樣式。比如一個段落的第一個字母或者第一行。需要注意的是，這個::僞元素只能用於塊狀元素。
僞元素由兩個冒號組成：
::
下面的代碼設定了段落中第一個字母的樣式：
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
下面的代碼中設定了段落中第一行的樣式：
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
（IE6竟然支持，有些意外啊。）
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
這個僞類用於設定一個序列元素（比如li、tr）中的第n個元素（從1開始算起）的樣式。在上面例子中，設定第三個列表元素li的字體顏色爲紅色。
看一個更靈活的用法，在下面例子中設定第偶數個元素的樣式，可以用它來實現隔行換色：
tr:nth-child(2n) {
background-color: gray;
}
兼容瀏覽器：IE9+、Firefox 3.5+、Chrome、Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
與X:nth-child(n)功能類似，不同的是它從一個序列的最後一個元素開始算起。上面例子中設定倒數第二個列表元素的字體顏色。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
與X:nth-child(n)功能類似，不同的是它匹配的不是某個序列元素，而是元素類型。例如上面的代碼設置頁面中出現的第三個無序列表ul的邊框。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
與X:nth-of-type(n)功能類似，不同的是它從元素最後一次出現開始算起。上面例子中設定倒數第三個無序列表的邊框
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child僞類用於匹配一個序列的第一個元素。我們經常用它來實現一個序列的第一個元素或最後一個元素的上（下）邊框，如：
ul:nth-last-of-type(3) {
border: 1px solid black;
}
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul > li:last-child {
border-bottom:none;
}
與:first-child相反，它匹配的是序列中的最後一個元素。
示例：
讓我們構建一個簡單的示例來演示這些類的一種可能用法。我們將創建一個樣式化的列表項。
html
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
這裏沒什麼特別的，只是一個簡單的列表清單。
css
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
此樣式將設置背景，刪除ul上的瀏覽器默認填充，並對每個li添加邊框以提供一點深度。
如上圖所示，唯一的問題是，邊框將被應用到無序列表的頂部和底部-看起來很奇怪。讓我們使用:first-child和:last-child僞類來解決此問題。
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
好了，修好了！
演示地址：https://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html?_ga=2.97676511.1161645686.1589527331-2097206490.1561686961
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child
div p:only-child {
color: red;
}
這個僞類用的比較少。在上面例子中匹配的是div下有且僅有一個的p，也就是說，如果div內有多個p，將不匹配。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
在上面代碼中第一個div中的段落p將會被匹配，而第二個div中的p則不會。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
這個僞類匹配的是，在它上級容器下只有它一個子元素，它沒有鄰居元素。例如上面代碼匹配僅有一個列表項的列表元素。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type僞類與:nth-of-type(1)效果相同，匹配出現的第一個元素。我們來看個例子：
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
在上面的html代碼中，如果我們希望僅匹配List Item 2列表項該如何做呢：
方案一：
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
方案二：
p + ul li:last-child {
font-weight: bold;
}
方案三：
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera。
英文原文地址：https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
5. Webpack4 入門（上）|| Webpack4 入門（下）
6. MobX 入門（上） || MobX 入門（下）
7. 59篇原創系列彙總
回覆“加羣”與大佬們一起交流學習~
點擊“閱讀原文”查看70+篇原創文章
點這，與大家一起分享本文吧~