資訊專欄INFORMATION COLUMN
摘要：功夫不負(fù)有心人，找到了選擇器。定義和用法選擇器匹配屬于其父元素的第個(gè)子元素，不論元素的類型，從第一個(gè)子元素開(kāi)始計(jì)數(shù)第一個(gè)子元素的下標(biāo)是，不要和混淆，是。
這段時(shí)間在做一些東西，整理了其中遇到的一個(gè)關(guān)于CSS選擇器的問(wèn)題。
需要完成一個(gè)下圖的側(cè)邊欄效果：
乍一看，很簡(jiǎn)單嘛，標(biāo)簽列表、彈框，完工！
然后我就寫(xiě)了如下代碼：
基本樣式OK了，然后添加:hover等效果：
.primary-tag:hover {
background-color: #F5F5F5;
}
等等，這時(shí)候好像發(fā)現(xiàn)些什么：
第一個(gè)與最后一個(gè)li標(biāo)簽懸停時(shí)背景溢出了，沒(méi)關(guān)系，so eazy：
.tag li:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tag li:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
嗯？怎么回事，first-child生效了，last-chilld沒(méi)有生效：
仔細(xì)思考了一下這兩個(gè)選擇器，發(fā)現(xiàn)：
li:first-child 是匹配父元素的第一個(gè)li元素
li:last-child 是匹配父元素的最后一個(gè)li元素
原來(lái)，因?yàn)閺椏蚶锩嬉泊嬖?b>li元素，所以last-child屬性匹配到了彈框里面的最后一個(gè)li，在不修改 HTML 的基礎(chǔ)上稍作修改：
li.a:first-child
li.a:last-child
這回總可以了吧，懷揣著希望，摁下了F5，我的天哪，還是原樣，一臉懵逼中~~~
仔細(xì)查了下資料：
li.a:first-child 匹配父元素中class為a的，且是第一個(gè)li
li.a:last-child 匹配父元素中class為a的，且是最后一個(gè)li
也就是說(shuō)，最后一個(gè)li如果class為a，last-child生效；否則不生效（這里最后一個(gè)li還是匹配的彈框里的li，因?yàn)闆](méi)有class為a，所以選擇器失效，不會(huì)選中任何元素）。
許多人說(shuō)：”僅通過(guò)CSS是無(wú)法實(shí)現(xiàn)的，需要通過(guò)jQuery.....省略一大段理由”（建立在不更改html結(jié)構(gòu)標(biāo)簽的基礎(chǔ)上），難道真的一個(gè)這么簡(jiǎn)單的效果無(wú)法通過(guò)CSS實(shí)現(xiàn)嗎？
如果說(shuō)不可以通過(guò)CSS實(shí)現(xiàn)，那一定是沒(méi)有好好了解全CSS的屬性選擇器。功夫不負(fù)有心人，找到了 :nth-child(n) 選擇器。
:nth-child(n)定義和用法:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型，從第一個(gè)子元素開(kāi)始計(jì)數(shù)（第一個(gè)子元素的下標(biāo)是 1，不要和JS混淆，JS是0）。
n 可以是數(shù)字、關(guān)鍵詞或公式。
例： li:nth-child(2)指定為ul下第二個(gè)li
所以，按照如下設(shè)置就能達(dá)到我們想要的效果：
.a:nth-child(1) {
border-top-left-radius: 8px; //匹配第1個(gè)class為a的元素
border-top-right-radius: 8px;
}
.a:nth-child(5) {
border-bottom-left-radius: 8px; //匹配第5個(gè)class為a的元素
border-bottom-right-radius: 8px;
}
:nth-child(n)更多設(shè)置：
Odd 和 even 是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞。
在這里，我們?yōu)槠鏀?shù) a 元素指定兩種不同的背景色，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)：
.a:nth-child(Odd) {
color: #45E0B1; //匹配class為a的奇數(shù)元素
}
偶數(shù)：
.a:nth-child(even) {
color: #45E0B1; //匹配class為a的偶數(shù)元素
}
其實(shí)還有一個(gè)能達(dá)到上圖這種效果，也就是:nth-last-of-type(n)選擇器。
:nth-last-of-type(number)定義和用法:nth-last-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)（第一個(gè)子元素的下標(biāo)是 1，不要和JS混淆，JS是0）。
n 可以是數(shù)字、關(guān)鍵詞或公式。
:nth-last-of-type(number)更多設(shè)置Odd 和 even 是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞。
在這里，我們?yōu)槠鏀?shù) a 元素指定兩種不同的背景色，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)：
.a:nth-last-of-type(Odd) {
color: #45E0B1; //匹配class為a的奇數(shù)元素
}
偶數(shù)：
.a:nth-last-of-type(even) {
color: #45E0B1; //匹配class為a的偶數(shù)元素
}
測(cè)試一下：
.a:nth-last-of-type(5) {
color: #45E0B1; //匹配class為a的從后往前數(shù)的第5個(gè)元素（也就是第一個(gè)）
}
.a:nth-last-of-type(1) {
color: #26D7D7; //匹配class為a的從后往前數(shù)的第1個(gè)元素（也就是最后一個(gè)）
}
最終效果：
其實(shí)很多時(shí)候，并不是沒(méi)有解決辦法或者說(shuō)簡(jiǎn)便的辦法，只是我們不知道，說(shuō)明還懂得不夠，需要學(xué)習(xí)來(lái)充實(shí)自己。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115194.html
摘要：前言選擇器是前端的基本功只要你是一個(gè)前端這個(gè)一定要掌握今天之所以要重溫一下選擇器主要是和大家再?gòu)?fù)習(xí)一下選擇器中的一些常用符號(hào)的使用例如等的使用之所以要復(fù)習(xí)呢是因?yàn)槲乙粋€(gè)寫(xiě)后端的哥們前端寫(xiě)的也很好但是他今天突然問(wèn)我中加號(hào)和大于號(hào)是啥意思我說(shuō)這前言 css選擇器,是前端的基本功,只要你是一個(gè)前端,這個(gè)一定要掌握!今天之所以要重溫一下css選擇器,主要是和大家再?gòu)?fù)習(xí)一下css選擇器中的一些常用符號(hào)...
摘要：前言如果說(shuō)作為前端開(kāi)發(fā)的基本功那么選擇器就是基礎(chǔ)中的基礎(chǔ)如果你在復(fù)寫(xiě)或者學(xué)習(xí)這些容易令人混淆的選擇器那么你就來(lái)對(duì)地方了我的老伙計(jì)本篇文章會(huì)直接了當(dāng)?shù)谋容^它們的特性幫助你快速的掌握它們這兩個(gè)選擇器會(huì)匹配一 前言 如果說(shuō) css 作為前端開(kāi)發(fā)的基本功, 那么 選擇器 就是基礎(chǔ)中的基礎(chǔ). 如果你在復(fù)寫(xiě)或者學(xué)習(xí)這些容易令人混淆的選擇器, 那么你就來(lái)對(duì)地方了, 我的老伙計(jì). 本篇文章會(huì)直接了當(dāng)?shù)?..
摘要：偽類選擇器之動(dòng)態(tài)偽類序號(hào)選擇器名稱說(shuō)明版本動(dòng)態(tài)偽類選擇器未被訪問(wèn)時(shí)動(dòng)態(tài)偽類選擇器已被訪問(wèn)時(shí)動(dòng)態(tài)偽類選擇器鼠標(biāo)以上時(shí)動(dòng)態(tài)偽類選擇器訪問(wèn)中跳轉(zhuǎn)頁(yè)面時(shí)動(dòng)態(tài)偽類選擇器獲得焦點(diǎn)時(shí)是有順序的，其他順序可能無(wú)效，這是個(gè)坑。 1. 基本選擇器 序號(hào) 選擇器 名稱 說(shuō)明 css版本 1 * 通用選擇器 選擇所有元素，包括html和body 2 2 div,span 標(biāo)簽選擇器 根據(jù)標(biāo)簽選擇...
閱讀 1093·2019-08-30 12:57
閱讀 2199·2019-08-30 11:11
閱讀 2201·2019-08-29 15:20
閱讀 1896·2019-08-29 14:12
閱讀 3293·2019-08-28 17:51
閱讀 2400·2019-08-26 13:23
閱讀 838·2019-08-26 10:34
閱讀 3897·2019-08-23 12:37
