css 選擇器簡介

前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！

如果以4位數表示選擇符權重，那麼：

部分屬性選擇器：div[class ^="a"]，獲取 class 屬性值以 a 為開頭的 div 元素；div[class $="b"]，獲取 class 屬性值以 b 為結尾的 div 元素；

子元素，只往下找一級；子元素選擇器和後代選擇器不太一樣，後代選擇器包含子元素選擇器，並且後代選擇器還會繼續向下查詢；

兄弟元素選擇器：

:root 選擇文件的根元素，即 html 元素；

input:focus，當前 input 框獲得焦點；

element:hover，滑鼠懸停在當前元素上面；

div:nth-of-type(n)，選擇是其父元素的第 n 個

div 元素，這個是依照父元素內部的

div 元素的順序計算 n ，然後獲取的； n 是整數，並且從1開始，也可以是公式，也可以是關鍵字even（偶數）、odd（奇數）；

div:first-of-type，選擇是其父元素的第 1 個 div 元素，與 div:nth-of-type(1) 效果相同；

div:last-of-type，選擇是其父元素的最後一 個 div 元素，注意前面沒有 nth；

div:nth-last-of-type(n)，選擇是其父元素的第 n 個 div 元素，但是是從最後乙個子項往前數，注意前面有 nth；

div:nth-child(n)，選擇是其父元素的第 n 個

子元素，並且得是 div 元素，這個是依照父元素內部的

子元素的順序計算 n ，然後再看第 n 個是否為 div 元素；這就出現一種情況，第 n 個子元素可能不是 div ，然後就獲取不到了

，所以用 nth-of-type(n) 會好一點；

div:first-child，選擇是其父元素的第 1 個元素，並且是 div 元素，與 div:nth-child(1) 相同；

div:last-child，選擇是其父元素的最後乙個元素，並且是 div 元素；

div:nth-last-child(n)，選擇是其父元素的第 n 個子元素，並且得是 div 元素，但是是從最後乙個子項往前數，注意前面有 nth；

還有很多其他的...

:first-letter，指定乙個元素第乙個字母的樣式，所有前導標點符號應與第乙個字母一同應用該樣式，並且只能與塊級元素關聯；

:first-line，設定元素中第一行文字的樣式，只能與塊級元素關聯；

:after，ie7及以下不支援，在元素內容的最開始插入生成內容；

:before，ie7及以下不支援，在元素內容的最後插入生成內容；

::selection，匹配被使用者選擇的部分；只支援雙冒號寫法，只支援顏色和背景顏色兩個樣式；

CSS 選擇器簡介

前言 這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！如果以4位數表示選擇符權重，那麼 css選擇器簡介 部分屬性選擇器 div class a 獲取 class 屬性值以 a 為開頭的 div 元素 div class b 獲取 class 屬性值以 b 為結...

CSS選擇器簡介

1 常用的css選擇器 選擇器名稱 8種 示例 注意1 html 選擇器日照香爐生紫煙，遙看瀑布掛前川。p2 類選擇器 class class txt txt以.開頭3 id 選擇器id day9 九天 day9 id唯一 4 群組聯合選擇器 h1,h3,p,h4以,分隔5 上下文選擇器 16tab...

CSS的簡介及其選擇器

基本語法檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視css的效果 檢視css的效果 檢視css的效果 zhangsan 23 選擇所有標籤1.未連線 a link 2.已經訪問鏈結 a visited...