資訊專欄INFORMATION COLUMN
摘要：前言如果說作為前端開發(fā)的基本功那么選擇器就是基礎(chǔ)中的基礎(chǔ)如果你在復(fù)寫或者學(xué)習(xí)這些容易令人混淆的選擇器那么你就來(lái)對(duì)地方了我的老伙計(jì)本篇文章會(huì)直接了當(dāng)?shù)谋容^它們的特性幫助你快速的掌握它們這兩個(gè)選擇器會(huì)匹配一
前言
如果說 css 作為前端開發(fā)的基本功, 那么 "選擇器" 就是基礎(chǔ)中的基礎(chǔ). 如果你在復(fù)寫或者學(xué)習(xí)這些容易令人混淆的選擇器, 那么你就來(lái)對(duì)地方了, 我的老伙計(jì).
本篇文章會(huì)直接了當(dāng)?shù)谋容^它們的特性, 幫助你快速的掌握它們:
first-child
last-child
first-of-type
last-of-type
only-child
only-of-type
nth-child
nth-last-child
nth-of-type
nth-last-of-type
first-child & last-child這兩個(gè)選擇器會(huì)匹配一組兄弟元素中的第一個(gè):
注意: 要想使得該選擇器起作用實(shí)際上需要滿足三個(gè)條件:
被前面的選擇器匹配 此例中是 p
是一組兄弟元素
是第一個(gè)(或者最后一個(gè))元素
last-child 在此不多贅述, 區(qū)別就是從后向前進(jìn)行匹配.
first-of-type & last-of-type這兩個(gè)選擇器會(huì)匹配同一組類型中的第一個(gè)(最后一個(gè))而不理會(huì)該元素的位置是否真的是在該組元素的第一個(gè)(最后一個(gè)):
注意: 要想使得該選擇器起作用實(shí)際上需要滿足兩個(gè)條件:
被前面的選擇器匹配 此例中是 p
是一組兄弟元素
last-of-type 在此不多贅述, 區(qū)別就是從后向前進(jìn)行匹配.
only-child & only-of-typeonly-child 匹配那些沒有兄弟元素的元素, 換句話說匹配那些 "孤兒" 元素:
上圖中被 "孤立" 的元素有第一個(gè)
和嵌套的 它們都被選擇器匹配到了.
only-of-type 匹配一組兄弟元素中類型唯一類型的元素:
因?yàn)榈谝粋€(gè)
和第二個(gè)
以及最后的 在對(duì)應(yīng)的父元素下類型都是唯一的所以它們會(huì)被選擇器匹配到.
nth-child & nth-last-child這些偽類選擇器最有意思的一點(diǎn)就是可以傳入一個(gè)公式 an+b, 根據(jù)這個(gè)公式來(lái)匹配元素. 這個(gè)公式有很多玩法, 導(dǎo)致有很多人將這個(gè)公式的所有組合以及所匹配的內(nèi)容背下來(lái).
實(shí)際上我們的思考方式被 css 給固化了, 因?yàn)檫@個(gè)東西從數(shù)學(xué)的角度來(lái)看非常容易摸清楚規(guī)律, 例如有如下的代碼:
第一行
第二行
第三行
思考模式:
先收集匹配到的元素, 在這個(gè)例子中就是三個(gè)
標(biāo)簽
從下標(biāo) 0 后數(shù)到 2 表示
的個(gè)數(shù), 依次帶入公式求值
將對(duì)應(yīng)下標(biāo)的元素進(jìn)行匹配(元素下標(biāo)從1開始數(shù))
結(jié)果:
| 公式 | 解釋 |
|---|---|
| 2n | 所有偶數(shù)元素 |
| 2n+1 | 所有奇數(shù)元素 |
| n & n+1 | 所有元素 |
| n+2 | 第二個(gè)元素后的元素(包括第二個(gè)元素) |
| n+3 | 第三個(gè)元素后的元素(包括第三個(gè)元素) |
| 0n | 啥都匹配不到 |
| 3n+4 | 4,7,10,13 .... |
| 1 | 只匹配第一個(gè)元素 |
| -n+2 | 只匹配前兩個(gè)元素 |
| nth-child(odd) | 奇數(shù)元素 |
| nth-child(even) | 偶數(shù)元素 |
不過不要忘記了 nth-child 匹配的依然是同一組兄弟元素, 不過有趣的是 nth-child 會(huì)利用選擇器進(jìn)行過濾, 但是應(yīng)用樣式的時(shí)候卻不把樣式應(yīng)用到匹配的元素上:
上圖中 元素被視為兄弟元素進(jìn)行匹配, 但是有趣的是作為第三個(gè) 元素 "第三行" 也被匹配到了, 這說明在應(yīng)用樣式會(huì)直接應(yīng)用在一組兄弟元素中而不是被匹配到的 元素, 不過需要注意的是如果圖片中的 "第三組" 中的 是 nth-last-child 就是從后向前的版本, 這里就不在詳細(xì)舉例了: MDN 上還給出了一個(gè)有意思的例子, 可以根據(jù)元素的數(shù)量來(lái)控制元素的樣式: nth-of-type 匹配: 同一組中相同類型的兄弟元素 匹配對(duì)應(yīng)公式計(jì)算值的元素 你注意到了嗎 nth-of-type 和 nth-child 是有些區(qū)別的, 計(jì)算完成后樣式的應(yīng)用到了被匹配的元素身上, 而不是兄弟元素上. nth-last-of-type 是一個(gè)從后向前的版本, 這里不在詳細(xì)介紹: 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116163.html 摘要：將超出對(duì)象尺寸的內(nèi)容進(jìn)行裁剪，不會(huì)出現(xiàn)滾動(dòng)條。過渡效果使用動(dòng)畫使用需要觸發(fā)一個(gè)事件才會(huì)隨著時(shí)間改變其屬性在不需要觸發(fā)任何事件的情況下，也可以顯式的隨時(shí)間變化來(lái)改變?cè)貙傩裕_(dá)到一種動(dòng)畫的效果動(dòng)畫不需要事件觸發(fā)，過渡需要。
1.請(qǐng)列出核心選擇器、層次選擇器有哪些 (5)
核心選擇器：id選擇器、class選擇器、標(biāo)簽選擇器、逗號(hào)選擇器、普遍選擇器
層次選擇器：子代選擇器、后代選擇器、下... 摘要：前言選擇器是前端的基本功只要你是一個(gè)前端這個(gè)一定要掌握今天之所以要重溫一下選擇器主要是和大家再?gòu)?fù)習(xí)一下選擇器中的一些常用符號(hào)的使用例如等的使用之所以要復(fù)習(xí)呢是因?yàn)槲乙粋€(gè)寫后端的哥們前端寫的也很好但是他今天突然問我中加號(hào)和大于號(hào)是啥意思我說這前言
css選擇器,是前端的基本功,只要你是一個(gè)前端,這個(gè)一定要掌握!今天之所以要重溫一下css選擇器,主要是和大家再?gòu)?fù)習(xí)一下css選擇器中的一些常用符號(hào)... 摘要：小肆也是被這些消息嚇得瑟瑟發(fā)抖，不過生活就是這樣，誰(shuí)也無(wú)法預(yù)料到第二天會(huì)發(fā)生什么，只有把握好現(xiàn)在，積極為未知的明天做好準(zhǔn)備才是正道。這里小肆給大家?guī)c(diǎn)建議對(duì)于目前在職的同學(xué)，保持學(xué)習(xí)，提升自己核心競(jìng)爭(zhēng)力，讓自己成為不會(huì)被輕易替代的那個(gè)人。
前言
2019互聯(lián)網(wǎng)寒冬已至，大批互聯(lián)網(wǎng)公司紛紛裁員，其實(shí)從2018年下半年開始，裁員和市場(chǎng)部收縮預(yù)算就經(jīng)常被提及，阿里巴巴，華為都傳出了收縮招聘的... 中的兩組
的話類型不同樣式是不會(huì)被應(yīng)用的.
li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
color: red;
}
nth-of-type & nth-last-of-type
A list of four items (styled):
A list of two items (unstyled):
相關(guān)文章
html5與css3階段復(fù)習(xí)題
css選擇器
立即收藏！2019前端工程師如何應(yīng)對(duì)裁員潮？
發(fā)表評(píng)論
0條評(píng)論
閱讀 2130·2021-11-08 13:22
閱讀 2628·2021-09-04 16:40
閱讀 1234·2021-09-03 10:29
閱讀 1786·2019-08-30 15:44
閱讀 2185·2019-08-30 11:13
閱讀 2875·2019-08-29 17:07
閱讀 2058·2019-08-29 14:22
閱讀 1333·2019-08-26 14:00
