| [快速入門前端 17] CSS 選擇器 (6) 選擇器總結 | 您所在的位置：网站首页 › hover子元素改变父元素 › [快速入門前端 17] CSS 選擇器 (6) 選擇器總結 |
|
基本選擇器
選擇器
說明
語法
通配符
作用範圍為所有標籤，用於頁面整體樣式
* { color: red }
元素
作用於同種標籤，不能進行差異化樣式設定
p { color: red }
類別
作用於我們自行設定的類別，是使用頻率最高的選擇器
.myClass { color: red }
ID
選取當前 ID 相同的唯一元素
#myId { color: red }
屬性選擇器
用法多元，依屬性進行篩選
[name="myElement"] { color: red }
點我複習 複合選擇器 選擇器 說明 語法 交集 選取滿足所有選擇器的元素 選擇器1選擇器2...選擇器n { color: red } (不空格) 併集 選取滿足任一選擇器的元素 選擇器1, 選擇器2, ...選擇器n { color: red } (逗號分隔) 後代選擇器 選取符合條件的後代元素 元素1 後代 後代的後代 ... 後代n { color: red } (空格分隔) 子選擇器 選取符合條件的(直接)子元素 元素1>子代>子代的子代>...子代n { color: red } (> 號分隔)點我複習 偽類選擇器 動態偽類 選擇器 說明 搭配元素 語法 :link 未訪問過的連結 只能用於 a 連結相關元素 a:link{ } :visited 已訪問過的連結 只能用於 a 連結相關元素 a:visited{ } :hover 滑鼠懸在至元素上時 可用於所有元素 a:hover{ } :active 點該擊元素時 可用於所有元素 a:active{ } :focus 該元素被 focus 時 只能用於表單輸入類元素 input:focus{ }點我複習 結構偽類 選擇器 說明 補充 :root 代表根元素，也就是 標籤。 幾乎不會用到 :first-child 選擇第一個子元素 (不論是否為同類標籤) :last-child 選擇最後一個子元素 (不論是否為同類標籤) 與 first-child 相反，從後數到前 :first-of-type 選擇第一個同類子元素 (同標籤的第一個子元素) :last-of-type 選擇最後一個同類子元素 (同標籤的最後一個子元素) 與 first-of-type 相反，從後數到前 :nth-child(n) 選擇第 n 個子元素 n 中可以寫數字、基偶數關鍵字、an+b 公式 :nth-last-child(n) 倒數第 n 個子元素 與 nth-child 相反，從後數到前 :nth-of-type(n) 選擇第 n 個同類子元素 :nth-last-of-type(n) 倒數第 n 個類子元素 與 nth-of-type 相反，從後數到前 :only-child 沒有任何兄弟元素的子元素 獨生子的概念點我複習 其他偽類 選擇器 說明 補充 :checked 勾選狀態的單多選框 有些預設樣式不可修改，例如背景顏色 :disabled 禁用狀態的元素 :enabled 可用狀態的元素 較少用 :not(基本選擇器) 選取除了括號內選擇器的元素 括號內只能放基本選擇器，不可再嵌套一個 not :target 錨點的目標元素 :lang(語言) 選取 lang 屬性值相符的元素 必須搭配 lang 屬性使用點我複習 偽元素選擇器 選擇器 說明 補充 ::first-letter 元素內容的第一個字元 ::first-line 元素內容的第一行 ::selection 滑鼠選中的內容 ::placeholder 文字框提示文字 ::before 於元素內容前新增一個元素 content 為必要屬性 ::after 於元素內容後新增一個元素 content 為必要屬性點我複習 |
| CopyRight 2018-2019 实验室设备网 版权所有 |