【青訓營】做面試題般回顧前端基礎知識CSS篇 - 1 CSS選擇器的那些事兒

---

theme: smartblue

1.CSS選擇器與選擇器的優先順序

知識前瞻

另外 設定在父元素上的CSS屬性是可以被子元素繼承的

這裡老師講的還是比較基礎的 我們來看幾個面試經典問題——

【1】CSS選擇器有哪些？

首先來看看 都有哪些CSS選擇器呢！

• id選擇器 # myId

• 類選擇器 .myclassname

• 標籤選擇器 div h1 p

• 相鄰選擇器 h1 + p

  這個選擇器我以前是沒見過~ 具體作用是 選擇緊貼在第一個選擇器後面那個元素（在本例中 只要出現h1 p相鄰的情況 p就會被選擇！）

  當然 有多個相鄰的 也是可以的嗷~

  一個li和4個li相鄰 li+li就會選擇後面的那四個li！

• 子選擇器 ul > li

• 後代選擇器 li a

以前我一直很好奇 不是有了後代選擇器嘛 那還要子選擇器幹啥

然後MDN文件就無情地嘲諷了我“早料到你這粗心鬼會忘掉子選擇器的特殊性”——

使用 > 選擇器分隔兩個元素時 它只會匹配那些作為第一個元素的直接後代的第二元素

而由後代選擇器相連的時候 它表示匹配存在的所有由第一個元素作為祖先元素（不只是子元素）的第二元素 無論它在DOM中“跳躍”多少次

• 萬用字元選擇器 *

• 屬性選擇器 a[href="www.juejin.cn"] 這個之前也沒見過欸！詳情戳這裡

上面舉的例子選擇的元素是”所有href屬性為 www.juejin.cn 的a標籤“

• 偽類選擇器

  • a:hover 滑鼠懸浮樣式

  • li:nth-child(n) 選擇屬於li父元素的第n個子元素中的每個li

• 偽元素選擇器

  • ::after(CSS3兩個冒號 CSS2一個冒號）用來建立一個偽元素，作為已選中元素的最後一個子元素。通常會配合content屬性來為該元素新增裝飾內容

要注意偽類選擇器（左面那部分）和偽元素選擇器（右面那部分）的區別哦！

【2】哪些屬性可以繼承？

上面說到了 有些CSS屬性是可以被子元素繼承的 有些不能 那麼 到底哪些能 哪些不能捏~

• 可繼承的樣式

  • font-size

  • font-family

  • color

• 不可繼承的樣式

  • border

  • padding

  • margin

  • width

  • height

那肯定的啊~這些樣式如果都可以繼承的話 頁面豈不是大亂了

所以大家也不用刻意地去背

就想一下開發的時候哪些屬性是絕不可能由父元素往下傳遞的就好~

## 【3】CSS優先順序

這裡由很有趣的一張圖

簡單總結下——

!important > 內聯樣式 > id選擇器 > 類選擇器 = 偽類選擇器 = 屬性選擇器 > 標籤選擇器 = 偽元素選擇器 > 萬用字元選擇器 > 瀏覽器預設樣式

用數字形象地描述下（上圖也是這麼描述地）就是——

!important = 10000

內聯樣式 = 1000

id選擇器 = 0100

類選擇器 偽類選擇器 屬性選擇器 = 0010

標籤選擇器 偽元素選擇器 = 0001

萬用字元選擇器 = 0000

這裡要注意 100個id選擇器的權重也是比不上內聯樣式的哦！這裡的 1000 100只是舉個例子 實際上 這個效果是一錘定音的 看上面的例子就知道了 100只小魚也還得乖乖被鯊魚吃掉啊~