CSS 選擇符大全(常用css選擇符)

2022-04-02 04:11:29 字數 1514 閱讀 5183

e(某個元素,如p)

id(使用id,如#idname)

class(使用class,如.myclass)

萬用字元:*

包含選擇符:e f(e所有的f包含子代,孫代,子子孫孫等等)

子選擇符:e相鄰選擇符:e+f(和e相鄰的f,相隔乙個都不算)

兄弟選擇符:e~f(和e同級的f的算)

e[att](e中帶有某個att屬性的元素)

e[att="val"] (e中帶有att且值為val的元素)

e[att~="val"] (e中包含att屬性,中存在val值)

e[att^="val"] (e中att屬性值以val開頭的元素)

e[att$="val"] (e中att屬性值為以val結尾的元素)

e[att*="val"] (e中att屬性值為包含val字元的元素)

e[att|=="val"] (e中att屬性值為val 或者是val-連線的字串)

(基於元素某種特性定義的類,偽類通俗點就你不需要再自己定義class,直接使用即可)

e:link (a元素沒有被訪問時)

e:visited (a元素已經被訪問了)

e:hover (滑鼠懸浮在元素時)

e:active (滑鼠點選到釋放時)

e:focus (元素成為輸入焦點時)

e:lang(fr) (匹配使用特殊語言)

e:not(s) (匹配沒有s樣式的元素e)

e:root (匹配e的根元素)

e:first-child (匹配父元素第乙個子元素e)

e:last-child(css3) (匹配父元素的最後乙個子元素e)

e:only-child(匹配父元素僅有的元素e)

e:nth-child(n)(匹配父元素第n個子元素e)

e:nth-last-child(n)(匹配父元素倒數第n個子元素e)

e:first-of-type(匹配同型別第乙個同級兄弟元素e)

e:empty(匹配沒有任何子元素(包括text節點)的e)

e:checked:(匹配處於選中狀態的元素e,input的radio與checkbox)

e:enabled :(匹配處於可用狀態的元素e)

e:disabled: (匹配處於不可以狀態的元素e)

e:first-letter (首字下沉)

e:first-line (第一行樣式)

e:before (設定在物件前(依據物件樹的邏輯結構)發生的內容。用來和content屬性一起使用,並且必須定義content屬性)

e:after (設定在物件後(依據物件樹的邏輯結構)發生的內容。用來和content屬性一起使用,並且必須定義content屬性)

e::placeholder (設定input佔位符的樣式)

e::selection (設定文字被選擇時的樣式)

本篇是個人筆記,可經常看看。

向前走,也別忘記要多回顧

常用CSS選擇符大全

要操作乙個元素,我們必須能夠快速的選擇到這個元素,因此css選擇符非常重要,下面列出的是最常用的css選擇符 title1 li 為取得id為title1 title 的子元素 中所有的列表項 li title1 li not class1 為取得id為title的後代元素中沒有 not class...

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...