重學前端筆記21-css選擇器

verfallen發表於2019-03-27
前端筆記CSS

CSS 選擇器

選擇器

基本意義： 根據一些特徵，選中元素樹中的一批元素。

結構分類（由簡單到複雜）

  1. 簡單選擇器： 針對某一特徵判斷是否選中元素
  2. 複合選擇器： 連續寫在一起的簡單選擇器，針對元素自身特徵選擇單個元素。
  3. 複雜選擇器：由 "(空格)",">"，“~”，“+” “||” 等符號連線的複合選擇器，根據父元素或者前序元素檢查單個元素。
  4. 選擇器列表：由逗號分隔的複雜選擇器，表示“或”的關係。

簡單選擇器

常見的簡單選擇器

重學前端筆記21-css選擇器

型別選擇器和全體選擇器

**型別選擇器：**根據一個元素的標籤名來選中元素。 全體選擇器："*"，可以選中任意元素

帶名稱空間的型別選擇器

示例：區分選擇 svg 中的 a 和 html 中的 a

@namespace svg url(http://www.w3.org/2000/svg);
@namespace html url(http://www.w3.org/1999/xhtml);
svg|a {
stroke: blue;
stroke-width: 1;
}

html|a {
font-size: 40px;
}
複製程式碼

id 選擇器和 class 選擇器

都是針對特定屬性的選擇器 id 選擇器是 "#"後面跟隨 id 名 class 選擇器是"." 後跟隨 class 名,它識別的是用空格分隔的 class 語法

基本用法
#myid {
stroke: blue;
stroke-width: 1;
}

.mycls {
font-size: 40px;
}
複製程式碼

屬性選擇器

根據 HTML 元素的屬性來選中元素。

四種形態
  1. [att] 元素是否具有這個屬性，有就被選中
  2. [att=val] 精確匹配，元素的屬性值是否為 val
  3. [att~=val] 多種匹配，元素的值是否為若干值之一
  4. [att|=val] 開頭匹配，元素的值是否以 val 開頭
針對含有特殊字元的屬性

使用 val 用引號括起來，或者使用反斜槓轉義

偽類選擇器

一系列 css 規定好的選擇器，以:開頭，可以分為普通型和函式型兩種。

樹結構關係偽類
  • :root 樹的根元素
  • :empty沒有子節點的元素，有個例外就是子節點為空白文字節點的情況
  • :nth-child和:nth-last-child表示從前往後數第幾個子節點和從後往前數第幾個子節點 兩個函式型偽類，用法如下：

重學前端筆記21-css選擇器

  • :first-child和:last-child表示第一個和最後一個元素
  • :only-child 表示選中唯一一個子元素
  • :nth-of-type表示從前往後數第 n 個指定型別的元素，這種寫法就是一個變形的語法糖，比如 S:nth-of-type(An+b) 是 :nth-child(|An)
  • 其他：nth-last-of-type,first-of-type,last-of-type,only-of-type
連結與行為偽類選擇器
  • :any-link 表示任意連結
  • :link未訪問過的元素
  • :visited 已經訪問過的連結
  • :hover 滑鼠懸停在上的元素
  • :visited 使用者正在啟用這個元素
  • :focus 焦點落在這個元素之上
  • :target用於訪問選中瀏覽器 URL 的 hash 部分所指示的元素

在 Selector Level 4 草案中，還引入了 target-within、focus-within 等偽類，用於表示 target 或者 focus 的父容器。

邏輯偽類選擇器
  • :not 選中內部的簡單選擇器沒有命中的元素，現階段只支援簡單選擇器。 用法：
*|*: not(: hover);
複製程式碼

在 Selector Level 4 草案中，還引入了:is,:where,:has等 邏輯偽類。

其他偽類選擇器
  • 國際化：用於處理國際化和多語言問題 + dir + lang
  • 音訊/視訊：用於區分音訊播放狀態 + play + pause
  • 時序：用於配合讀屏軟體等時序性客戶端的偽類 + current + past + future
  • 表格：用於處理 table 的列的偽類 + nth-col + nth-last-col
偽類使用建議

儘量通過合適的 id 和 class 來標識元素，最好只在不得不使用偽類的情況下使用

相關文章