忙里偷閑的學(xué)習(xí)

在切頁面的時候，我們免不了要和css打交道笤虫，甚至說是頗深旁瘫，在HTML中，想要快速的定位元素琼蚯，除了廣為人知的.class酬凳、#id、通配符*遭庶、element元素等選擇器宁仔，css還為我們提供了更多在某些場景下，效率更高的選擇器峦睡。所以翎苫，最好自己也嘗試一下，不然就算你看過這篇隨手記榨了，也幾乎沒太大用處煎谍。即便不太容易記住，但是會留個印象阻逮，是吧~
PS：星星表示此選擇器在本文中的強(qiáng)調(diào)程度粱快。和常見度無關(guān)

CSS3選擇器 —— 元素選擇器 [element] （★★）

1. element{}秩彤。這個會選擇所有能匹配到的element叔扼；如div{}，則所有的div都會被選中漫雷。
2. element1,element2,....{}瓜富。這個會選擇所有能匹配到element；如div, a, p{} 降盹，則所有的div与柑，a，p都會被選中蓄坏。
3. element1 element2{} 這個會選擇父元素為element1的所有的element2子元素价捧；如div a{}，則div下所有的a都會被選中涡戳。
4. element1>element2{}结蟋。這個會選擇緊跟著element1的element2元素；如<div><p></p><p></p></div> div+p{} 渔彰，則div中的第一個p會被選中嵌屎。

CSS3選擇器 — — 屬性選擇器 [attribute]（★★★★）

<a target="_blank"  title="a b c a-hello">這是一個demo1</a>
<a target="_self"  title="hey hi hello a">這是一個demo2</a>

選擇器前面也可以添加元素推正，如：a[src^='https']{ … }， .info[title*='info']宝惰。

1. [target]{}植榕。這個會選擇帶所有帶target屬性的元素。在這里尼夺，上面兩個a標(biāo)簽都會被選中尊残。
2. [target=_blank]{}。這個會選擇所有帶target屬性且值為_blank的元素淤堵。在這里夜郁，上面兩個a標(biāo)簽只有第一個被選中。
3. [title~=hi]{}粘勒。這個會選擇所有帶title屬性且值包含 hi 的元素竞端。在這里，上面兩個a標(biāo)簽第二個會被選中庙睡。
4. [title|=a]{}事富。這個會選擇所有帶title屬性且值是以a開頭的元素。在這里乘陪，上面兩個a標(biāo)簽只有第一個被選中统台。
5. PS：上面2、3啡邑、4三個規(guī)則贱勃，屬性的值是一個單詞。而下面三個則是字符串谤逼。注意字符串和單詞是不一樣的
6. [src^="https"]{}贵扰。這個會選擇所有帶src屬性且值是以"https"開頭的元素。在這里流部，上面兩個a標(biāo)簽只有第一個被選中戚绕。
7. [title$="hello"]{}。這個會選擇所有帶title屬性且值是以"hello"結(jié)尾的元素枝冀。在這里舞丛，上面兩個a標(biāo)簽第一個會被選中。
8. [title*="hi"]{}果漾。這個會選擇所有帶title屬性且值包含 "hi" 的元素球切。在這里，上面兩個a標(biāo)簽第二個會被選中绒障。

CSS3選擇器—— 偽 類/元素選擇器 [:...]（★★★★★）

前言

這個是本文中的重點所在了吨凑，說實話，很多偽類/元素選擇器端盆，真的很不錯怀骤，但也真的很難在實際運用中見到费封，我想大概是因為繁瑣吧，畢竟大家都習(xí)慣了class統(tǒng)治樣式蒋伦，其他的都是不入流的小招式弓摘，233333.

就拿我舉例來說，在某個頁面的樣式中痕届，需要將后端給的數(shù)據(jù)渲染到頁面中韧献，但是這個數(shù)量是一直增加的。每當(dāng)?shù)谌齻€元素研叫，就與其他的有所區(qū)別锤窑。我得知需求后，第一個想法就是js判斷嚷炉。渊啰。∩暌伲可是這樣違背了樣式的控制權(quán)給了js

還好旁邊的前端小哥經(jīng)驗頗深绘证，且說我有什么不知道的或者覺得可以再優(yōu)化的地方，就找他哗讥。滴~好人卡嚷那。。杆煞。

他看到這個問題魏宽，搶過我的鍵盤，啪啪啪啪决乎，哦不队询，噠噠噠幾行css代碼完美的解決！

握草瑞驱，這么吊娘摔。窄坦。唤反。厲害了我的哥。

這時我也看到了 :nth-child(n)鸭津；這個css選擇器彤侍。對不起，請收下我的膝蓋逆趋，我保證我之前看過這個選擇器盏阶，但我也確定我只是看過而沒有用，就忘記了闻书。GG名斟。遂在午休時候脑慧，認(rèn)真的補(bǔ)了一遍css選擇器，咋補(bǔ)砰盐？當(dāng)然是選擇原諒她啊闷袒，然后晚飯后寫了這篇《那些被忽略但有時又很強(qiáng)的選擇器》

在這個分類，選擇器實在是太多了岩梳，詳細(xì)說明我就不做搬運工了囊骤，我就挑幾個我覺得不錯的，寫出來吧冀值，在文末會給參考文檔也物。

a標(biāo)簽相關(guān)選擇器

1. :link 選擇所有未被訪問的鏈接。
2. :visited 選擇所有已被訪問的鏈接列疗。
3. :active 選擇活動鏈接滑蚯。

input相關(guān)的選擇器

1. :enabled 選擇每個啟用的input 元素。
2. :disabled 選擇每個禁用的 input 元素
3. :checked 選擇每個被選中的 input 元素抵栈。
4. :focus 獲取焦點的input元素膘魄。 這個常見的應(yīng)用場景是在表單時，對應(yīng)的輸入框樣式

常見偽類/元素選擇器

1. :hover 鼠標(biāo)移動到上面的樣式竭讳。 這個常見的應(yīng)用場景是用作遮罩層
2. ::before, ::after 元素的前后樣式创葡。 這個常見的應(yīng)用場景有：清除浮動、添加特定的樣式绢慢、等等
   1. PS：這里是用了兩個冒號灿渴，因為它們是偽元素，雖然說用單冒號也能生效胰舆，但是為了推動css3骚露，我們還是統(tǒng)一用雙冒號咯。
   2. 附上兩篇文章總結(jié)偽類和偽元素 ———— ——— 詳解 CSS 屬性 - 偽類和偽元素的區(qū)別
3. :not(selector) 給非所選元素設(shè)定樣式

這里有趣的幾個有：

1. ::first-letter ： 給所選元素的首字母/中文 應(yīng)用樣式缚窿。這個選擇器可以做首字母效果棘幸。很方便，代碼如下：

   <p class="a">Oh my god</p><p class="a">我的天</p>
   <style>
     .a::first-letter{
       font-size:200%;
       color:#8a2be2;
   </style>
   

2. ::first-line： 給所選元素的首行應(yīng)用樣式倦零。這個應(yīng)用不太多吧误续。。

3. ::selection 選擇被用戶選取的部分扫茅。 這個應(yīng)用場景有蹋嵌，當(dāng)用戶選擇文本是，就可以使用這個選擇器葫隙，讓被選取的的文本更有趣栽烂。這個選擇器支持的樣式也有限。

4. :target 這個就很有趣了，不過不支持ie8及以下腺办。 當(dāng)前頁面活動的錨點的樣式焰手。代碼示例:

   <style>
     :target{
       border:2px solid #ccc;
       background-color: #e5eecc;
     }
   </style>
   <a href="#id1">jump target1</a>
   <a href="#id2">jump target2</a>
   <p id="id1">target1</p>
   <p id="id2">target2</p>
   

   效果體驗如下。點擊兩個錨點怀喉，對應(yīng)的id活躍時册倒，就可以有背景。

   <a href="#id1">jump target1</a> ——— <a href="#id2">jump target2</a>
   <p id="id1">target1</p>
   <p id="id2">target2</p>

5. 最后一個當(dāng)屬 :nth-child(n) 啦

   就像我上面說的磺送，這個選擇器用來循環(huán)選擇某個元素驻子，簡直不要太爽！

   <span>aaa</span>
   <span>bbb</span>
   <span>ccc</span>
   <style>
     span:nth-child(3n){
       background-color:green;  //原諒他啊
     }
   </style>
   

   <span class="c">aaa</span><span class="c">bbb</span><span class="c">ccc</span>

   <style>.c{display:inline-block;margin:0;border:1px solid #ccc; width:33%;text-align:center}.c:nth-child(3n){background-color:green;}</style>

寫到最后寫懵逼了估灿。

這懵逼的排版崇呵。。馅袁。域慷。原諒我吧

233333333333

參考文檔

CSS 選擇器參考手冊

原文鏈接

那些被忽略但有時又很強(qiáng)的選擇器