css3 偽類選擇器快速復習

MasonEast 發布于2019-08-30 15:44 / 1708人閱讀

摘要：前言如果說作為前端開發的基本功那么選擇器就是基礎中的基礎如果你在復寫或者學習這些容易令人混淆的選擇器那么你就來對地方了我的老伙計本篇文章會直接了當的比較它們的特性幫助你快速的掌握它們這兩個選擇器會匹配一

前言

如果說 css 作為前端開發的基本功, 那么 "選擇器" 就是基礎中的基礎. 如果你在復寫或者學習這些容易令人混淆的選擇器, 那么你就來對地方了, 我的老伙計.

本篇文章會直接了當的比較它們的特性, 幫助你快速的掌握它們:

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

這兩個選擇器會匹配一組兄弟元素中的第一個:

注意: 要想使得該選擇器起作用實際上需要滿足三個條件:

被前面的選擇器匹配此例中是 p

是一組兄弟元素

是第一個(或者最后一個)元素

last-child 在此不多贅述, 區別就是從后向前進行匹配.

first-of-type & last-of-type

這兩個選擇器會匹配同一組類型中的第一個(最后一個)而不理會該元素的位置是否真的是在該組元素的第一個(最后一個):

注意: 要想使得該選擇器起作用實際上需要滿足兩個條件:

被前面的選擇器匹配此例中是 p

是一組兄弟元素

last-of-type 在此不多贅述, 區別就是從后向前進行匹配.

only-child & only-of-type

only-child 匹配那些沒有兄弟元素的元素, 換句話說匹配那些 "孤兒" 元素:

上圖中被 "孤立" 的元素有第一個

和嵌套的它們都被選擇器匹配到了.

only-of-type 匹配一組兄弟元素中類型唯一類型的元素:

因為第一個

和第二個

以及最后的在對應的父元素下類型都是唯一的所以它們會被選擇器匹配到.

nth-child & nth-last-child

這些偽類選擇器最有意思的一點就是可以傳入一個公式 an+b, 根據這個公式來匹配元素. 這個公式有很多玩法, 導致有很多人將這個公式的所有組合以及所匹配的內容背下來.

實際上我們的思考方式被 css 給固化了, 因為這個東西從數學的角度來看非常容易摸清楚規律, 例如有如下的代碼:

第一行

第二行

第三行

思考模式:

先收集匹配到的元素, 在這個例子中就是三個

標簽

從下標 0 后數到 2 表示

的個數, 依次帶入公式求值

將對應下標的元素進行匹配(元素下標從1開始數)

結果:

公式	解釋
2n	所有偶數元素
2n+1	所有奇數元素
n & n+1	所有元素
n+2	第二個元素后的元素(包括第二個元素)
n+3	第三個元素后的元素(包括第三個元素)
0n	啥都匹配不到
3n+4	4,7,10,13 ....
1	只匹配第一個元素
-n+2	只匹配前兩個元素
nth-child(odd)	奇數元素
nth-child(even)	偶數元素

不過不要忘記了 nth-child 匹配的依然是同一組兄弟元素, 不過有趣的是 nth-child 會利用選擇器進行過濾, 但是應用樣式的時候卻不把樣式應用到匹配的元素上:

上圖中

中的兩組

元素被視為兄弟元素進行匹配, 但是有趣的是作為第三個

元素 "第三行" 也被匹配到了, 這說明在應用樣式會直接應用在一組兄弟元素中而不是被匹配到的

元素, 不過需要注意的是如果圖片中的 "第三組" 中的

是

的話類型不同樣式是不會被應用的.

nth-last-child 就是從后向前的版本, 這里就不在詳細舉例了:

MDN 上還給出了一個有意思的例子, 可以根據元素的數量來控制元素的樣式:

li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  color: red;
}

A list of four items (styled):

  One
  Two
  Three
  Four


A list of two items (unstyled):

  One
  Two

nth-of-type & nth-last-of-type

nth-of-type 匹配:

同一組中相同類型的兄弟元素

匹配對應公式計算值的元素

你注意到了嗎 nth-of-type 和 nth-child 是有些區別的, 計算完成后樣式的應用到了被匹配的元素身上, 而不是兄弟元素上.

nth-last-of-type 是一個從后向前的版本, 這里不在詳細介紹:

GPU云服務器云服務器管理器快速打開選擇器派生選擇器省市選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116163.html

html5與css3階段復習題

摘要：將超出對象尺寸的內容進行裁剪，不會出現滾動條。過渡效果使用動畫使用需要觸發一個事件才會隨著時間改變其屬性在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素屬性，達到一種動畫的效果動畫不需要事件觸發，過渡需要。 1.請列出核心選擇器、層次選擇器有哪些 (5) 核心選擇器：id選擇器、class選擇器、標簽選擇器、逗號選擇器、普遍選擇器層次選擇器：子代選擇器、后代選擇器、下...

techstay 2019-08-30 15:44 評論0 收藏0
css選擇器

摘要：前言選擇器是前端的基本功只要你是一個前端這個一定要掌握今天之所以要重溫一下選擇器主要是和大家再復習一下選擇器中的一些常用符號的使用例如等的使用之所以要復習呢是因為我一個寫后端的哥們前端寫的也很好但是他今天突然問我中加號和大于號是啥意思我說這前言 css選擇器,是前端的基本功,只要你是一個前端,這個一定要掌握!今天之所以要重溫一下css選擇器,主要是和大家再復習一下css選擇器中的一些常用符號...

番茄西紅柿 2019-04-23 13:36 評論0 收藏0
立即收藏！2019前端工程師如何應對裁員潮？

摘要：小肆也是被這些消息嚇得瑟瑟發抖，不過生活就是這樣，誰也無法預料到第二天會發生什么，只有把握好現在，積極為未知的明天做好準備才是正道。這里小肆給大家幾點建議對于目前在職的同學，保持學習，提升自己核心競爭力，讓自己成為不會被輕易替代的那個人。前言 2019互聯網寒冬已至，大批互聯網公司紛紛裁員，其實從2018年下半年開始，裁員和市場部收縮預算就經常被提及，阿里巴巴，華為都傳出了收縮招聘的...

songjz 2019-08-30 15:55 評論0 收藏0