前言
有時候我在想，咱們前端寫頁面比較花時間，能不能儘量的減小部分時間呢？固然你會說「你傻啊，不是有UI庫嘛！」，可是別忘了，不是每一個項目都有可用的UI庫，同時使用別人的UI庫，並不能百分百可以解決你全部的問題，若是咱們對CSS選擇器瞭解的更多一些，或許就能夠少寫不少JavaScript代碼，好比：鼠標的移入移出效果，選項卡的背景圖切換，圖片的漸隱漸顯等等，咱們須要掌握這些(包括不經常使用的)CSS選擇器，不管咱們在前端佈局UI，仍是替代javaScript寫效果,都能大大的提高咱們的效率。css
CSS選擇器分類
通配符選擇器
*{
margin:0;
padding:0;
}
複製代碼
元素（標籤）選擇器
p{ color:red; } 複製代碼
類選擇器
.warning{ color:red; } 複製代碼
ID選擇器
#warning{ color:red; } 複製代碼
優先級html
!important>行內樣式>ID選擇器>類、僞類、屬性>元素、僞元素>繼承>通配符前端
屬性選擇器
示例htmljava
<ul> <li foo>1</li> <li foo="abc">2</li> <li foo="abc efj">3</li> <li foo="abcefj">4</li> <li foo="efjabc">5</li> <li foo="ab">6</li> </ul> 複製代碼
html
[attribute]工具
[foo]{ background-color:red; } 複製代碼
選擇全部帶
foo屬性的元素佈局
view
[attribute=value]
選擇 attribute=value 的全部元素。post
[foo=abc]{ background-color:red; } 複製代碼
view
[attribute~=value]
選擇 attribute 屬性包含單詞 value 的全部元素。優化
[foo~=abc]{ background-color:red; } 複製代碼
view
[attribute^=value]
選擇其 attribute 屬性值以 value 開頭的全部元素。相似正則的
^,以什麼開始ui
[foo^=abc]{ background-color:red; } 複製代碼
view
[attribute$=value]
選擇其 attribute 屬性值以 value 開頭的全部元素。相似正則的
$,以什麼結束url
[foo$=abc]{ background-color:red; } 複製代碼
view
[attribute*=value]
選擇其 attribute 屬性中包含
value子串的每一個元素。
[foo*=abc]{ background-color:red; } 複製代碼
view
[attribute|=value]
選擇
attribute屬性值以value開頭的全部元素。
[foo|=abc]{ background-color:red; } 複製代碼
view
文檔結構選擇器
示例html
<ul> <li> <h1>h1</h1> <p>p1</p> </li> <li> <h1>h1</h1> <p>p1</p> </li> </ul> 複製代碼
html
後代選擇器 element element
選擇 element 元素內部的全部 element 元素。
ul li{ border: 1px solid red; } 複製代碼
html
子選擇器 element>element
選擇父元素爲 element 元素的全部 element 元素。
ul>li>p{ border: 1px solid red; } 複製代碼
html
相鄰兄弟選擇器 element+element
選擇緊接在 element元素以後的 element 元素。
示例html
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> </div> 複製代碼
html
h1+p{ color:red; } 複製代碼
html
通常兄弟選擇器 element1~element2
選擇前面有 element1 元素的每一個 element2 元素。
示例html
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> </div> 複製代碼
html
h1~p{ border: 1px solid red; } 複製代碼
html
僞類選擇器
:root 文檔根元素僞類
:root{ background-color:red; } 複製代碼
:nth-child(n) 孩子選擇器
示例html
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> </div> 複製代碼
html
div :nth-child(1){ color:red; } 複製代碼
html
:nth-of-type(n) 同類型的第n個元素
div p:nth-of-type(2){ color: red; } 複製代碼
html
element:first-child
選擇屬於父元素element的第一個子元素。 等同 :nth-child(1)
element:last-child
選擇屬於父元素element的最後一個子元素。
element:first-of-type
同類型的第一個子元素
element:first-of-type
同類型的最後一個子元素
element:only-child
選擇了父元素 element 惟一的子元素
示例html
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> </div> <div> <h1>h2</h1> </div> 複製代碼
div :only-child{ color: red; } 複製代碼
最終生效的元素的 div標籤下面只有一個元素的 h1 ,即 內容 h2 變成紅色，符合條件的都會改變
:empty 沒有子元素
<!DOCTYPE html> <html> <head> <style> p:empty { width:100px; height:20px; background:#ff0000; } </style> </head> <body> <h1>這是標題</h1> <p>第一個段落。</p> <p></p> <p>第三個段落。</p> <p>第四個段落。</p> <p>第五個段落。</p> </body> </html> 複製代碼
生效的是 <p></p>,沒有子元素
:nth-last-child(n) 倒數第n個子元素
<!DOCTYPE html> <html> <head> <style> div :nth-last-child(1){ color:red; } </style> </head> <body> <div> <p>第一個段落。</p> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p> <p>第五個段落。</p> </div> </body> </html> 複製代碼
父元素div的倒數第一個元素 被選中
element:nth-last-of-type(n)
同類型的倒數第n個子元素
<!DOCTYPE html> <html> <head> <style> div p:nth-last-of-type(2){ color:red; } </style> </head> <body> <div> <h1>h11</h1> <p>第一個段落。</p> <p>第二個段落。</p> <p>第三個段落。</p> <h1>h11</h1> <p>第四個段落。</p> <p>第五個段落。</p> <h1>h11</h1> </div> </body> </html> 複製代碼
<p>第四個段落。</p>處於同類型 p標籤 倒數第2個
div p:nth-last-of-type(2n+1){ color:red; } 複製代碼
2n+1(odd):奇數、2n(even)：偶數
element:last-of-type
同類型的倒數第一個子元素
element::first-of-type
同類型的第一個子元素
element::only-of-type
父元素裏惟一同類型子元素
<!DOCTYPE html> <html> <head> <style> div h1:only-of-type{ color: red; } </style> </head> <body> <div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> <h1>h2</h1> </div> <div> <h1>h2</h1> </div> </body> </html> 複製代碼
<h1>h2</h1>符合，被選中
a:link
沒有訪問過的狀態
a:active
連接正在被點擊
a:hover
選擇鼠標指針位於其上的連接。
a:visited
選擇全部已被訪問的連接。
:focus
:focus 選擇器用於選取得到焦點的元素。
提示：接收鍵盤事件或其餘用戶輸入的元素都容許 :focus 選擇器。
:enabled / :disabled
選擇每一個啓用的
input元素 / 選擇每一個禁用的input元素
:checked
選擇每一個被選中的
input元素。自定義開關能夠用這個實現
:not(selector)
選擇非 selector 元素的每一個元素。（反向選擇）
僞元素選擇器
element::first-line
<!DOCTYPE html> <html> <head> <style> p:first-line{ background-color:yellow; } </style> </head> <body> <h1>WWF's Mission Statement</h1> <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p> </body> </html> 複製代碼
p 元素的第一行發生改變
element::first-letter
<!DOCTYPE html> <html> <head> <style> h1:first-letter{ color:yellow; } </style> </head> <body> <h1>WWF's Mission Statement</h1> </body> </html> 複製代碼
直接第一個字符變黃，若是JavaScript作的話，須要獲取字符串，再獲取第一個字符，再改變其顏色
element::before
在每一個 element 元素的內容以前插入內容。咱們更多的多是當初一個div來用
element::before
在每一個element元素的內容以後插入內容。咱們可能更多的是用來清楚浮動或驗證表單提示等其它
::selection
選擇被用戶選取的元素部分。
參考文獻
結語
有時候，咱們須要提升本身的效率，咱們須要更多的時間去專一咱們的業務，而不該該由於CSS方面的不懂而致使咱們的停步不前，浪費咱們大把時間，so，以此爲習，鞏固或是強化。
同時，若是你有更好的點子，歡迎留言
文中如有不許確或錯誤的地方，歡迎指出
往期文章 ：