虎记：强大的nth-child(n)伪类选择器玩法
?
寫在前面的戲：
? 最近參加了度娘前端IFE的春季班，刷任務(wù)，百度真是有營銷頭腦，讓咱們這幫未來的技術(shù)狂人為他到處打廣告（我可不去哪），其中做的幾個任務(wù)中有幾個以前沒有用到的東西，
也算是有些許收獲（現(xiàn)在做了一半任務(wù)哦，萌萌噠），今天就來捋一捋css強(qiáng)大的nth-child(n)選擇器功能（以慶祝博客粉絲突破YI員，訪問量突破一百大關(guān)，可喜可賀，榮登博客名人指日可待！！）
?
?
?
（常規(guī)選擇器的YY）
這里說的東西有些初級哦，自己捋一捋思路寫的，不想看就跳過吧
選擇器又稱為“查戶口”，想找到一個節(jié)點(diǎn)，或者是找到多個節(jié)點(diǎn)，就跟警察抓兇手是一樣一樣的，從多方面入手，最簡入手，就是抓人的準(zhǔn)則
number1.?? class類（飯卡，能夠證明是這個學(xué)校的，可以找出一批人）
number2.?? id身份證（就是找你吶，大胸弟）
number3.? *[tittle='大光頭']屬性選擇器（強(qiáng)哥嗎？）
?
指向不到你哈，用關(guān)系找你
number1.? div span后代選擇器 （盒子兄啊，看看span是不是你孫子兒子啥的，有事兒）
number2.? div>span子代選擇器（好啊，盒子兄，就是你兒子span）
number3.? div+span鄰居選擇器（span是你鄰居吧）
最意外的是沒有father選擇器
?
事件選擇器（犯人已經(jīng)抓住）
a:link???? （抓住之前的生活，吃喝嫖賭是樣樣精通啊）
a:hover? （被盯上的生活，女票跟人跑了）
a:active? （被抓后的生活，吃牢飯）
a:visited? （釋放后的生活，吃喝嫖賭是樣樣精通啊）
?
偽元素（選中之后，施加魔法，給他個私生子，my god！這不是港劇才有的劇情嗎）
：after 后面
：before 前面
（可以優(yōu)雅得消除浮動
?? 可以添加小三角...如下）
.hidden:before {content: '';display: block;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #999999;position: absolute;top: -7px;left: 50px; }?
有沒有很贊（瞧這，又扯到小三角去了，灰色效果為展示使用，漸變后毫無p感）
?
?
?
除了以上的常規(guī)選擇器之外，其他的生僻選擇器就不寫了，亮出主題（沒事兒，列個表）
?
| 奇數(shù)偶數(shù) | ：nth-child（2n） | 偶數(shù)項(xiàng)選中 |
| 技術(shù)偶數(shù) | ：nth-child（2n-1） | 奇數(shù)項(xiàng)選中 |
| 區(qū)間 | nth-child(n+4） | 選中大于4的項(xiàng) |
| 區(qū)間 | nth-child（-n+4） | 選中小于4的項(xiàng) |
| 間隔區(qū)間 | nth-child(3n+1) | 隔二選一 |
| 間隔區(qū)間 | nth-child(3n) | 隔三選一 |
| 從后數(shù)數(shù) | nth-last-child() | 倒著數(shù)哦 |
?
如果想選中表格中的元素，使用強(qiáng)大的nth-child（）偽類選擇器異常方便（更加讓人著迷的是，括號中的函數(shù)表達(dá)式，可以有無限可能）
我想來【奇數(shù)】項(xiàng)變成color：red；中國紅
table tr:nth-child(2n-1){color: red;}?
（偶數(shù)自行把玩）
?
我想【前三項(xiàng)】變成background-color:yellow;(幸運(yùn)黃)
?得勁
?
?兄弟【隔三選一】來個過過癮font-size:25px;
table tr:nth-child(3n){font-size: 25px;}?
?come on man!!
?序文：2016-03-18中午吃完飯
關(guān)于nth-child( 3n+1 )和nth-child(3n)的共同點(diǎn)和不同點(diǎn)（感謝向晴同學(xué)的指正，你是我第二個粉絲哦）
?
| nth-child(3n) | 中間隔二選一 | ?起點(diǎn)：從0開始 |
| nth-child(3n+1) | ?中間隔二選一 | ?起點(diǎn)：從一開始 |
?
趕緊再舉個梨子（上圖）
table tr:nth-child(3n+1){color:red;} /*(3n+1),當(dāng)n=0的時(shí)候，值為一 */?
?
?
?
繼續(xù)上代碼
table tr:nth-child(3n){color:red;} /*當(dāng)n=0的時(shí)候，值等于零*/?
?（序文結(jié)束，還要謝謝向晴同學(xué)的指正！！）
?
?
?
最后一個咱就不試了，咱不騙人，鐵定能成。
像這種需要簡單函數(shù)表達(dá)式的，最好玩了，或者還有其他的玩法，這些只是常用的幾種選擇方法而已
關(guān)鍵是周圍“敵軍還有三十秒到達(dá)戰(zhàn)場...”哎呦，“全軍出擊”
你懂的，（我不玩游戲，只是想出去透透氣兒，哈哈噠）
?
?
手里有很多的學(xué)習(xí)筆記沒有整理，等有空之后，再一篇一篇整理上博客，也算是對自己一個交代了
?
最后總結(jié)：前端文化博大精深，妙趣橫生，實(shí)在有想走一輩子的沖動啊，ps（山無棱天地合，才敢...）
文章落款：2016年3月十七日，晚上十點(diǎn)不到，頸椎有點(diǎn)酸痛的感覺，（哎( ⊙ o ⊙ )，是頸椎）
?
轉(zhuǎn)載于:https://www.cnblogs.com/hu-w/p/5289668.html
總結(jié)
以上是生活随笔為你收集整理的虎记：强大的nth-child(n)伪类选择器玩法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js获取几个月前，几周前时间。
- 下一篇： ASP.NET MVC4 部分视图