一.偽元素選擇器
1. e:first-letter/e::first-letter(css3時代兩個冒號) 設定元素內的第乙個字元的樣式。
例如：
p::first-letter2. e:first-line/e::first-line 設定元素內的第一行的樣式。
例如：
p::first-line3. e:before/e::before在每個e元素的內容之前插入內容。用來和content屬性一起使用。
例如：
a::before4. e:after/e::after在每個e元素的內容之後插入內容。用來和content屬性一起使用。
例如：
a::after
a::aftercss3新增：
5. e::selection 設定物件被選擇時的顏色。
例如：
p::selectiontest2.html:
錦瑟———李商隱
錦瑟無端五十弦，一弦一柱思華年。
莊生曉夢迷蝴蝶，望帝春心託杜鵑。
滄海月明珠有淚，藍田日暖玉生煙。
此情可待成追憶？只是當時已惘然。
搜尋
style2.css:
p::first-letterp::first-line
a::before
a::after
p::selection
二. 偽類選擇器
1. 結構偽類選擇器
1）e:first-child 父元素的第乙個子元素e。
例如：
li:first-child
ul>li:first-child
td:first-childcss3新增：
2）:root 選擇文件的根元素。
例如：
:root3）e:last-child 最後乙個子元素e。
例如：
td:last-child//td的父元素中最後乙個元素4）e:only-child 僅有的乙個子元素e。
例如：
li:only-child//li的父元素中只有乙個li5）e:only-of-type 只有一種型別的子元素。
例如：
p:only-of-type//p的父元素中只有一種型別的子元素6）e:nth-child(n) 匹配父元素的第n個子元素e。
可以直接用數值：比如2
可以用奇數（odd）偶數（even）
可以用公式3n
例如：
tr:nth-child(2)7）e-nth-last-child(n) 匹配父元素的倒數第n個元素e。
例如：
tr:nth-last-child(2)
tr:nth-last-child(odd)
tr:nth-last-child(even)
tr:nth-last-child(3n-1)8）e:first-of-type 匹配同型別中的第乙個同級兄弟元素e。
例如：
p:first-of-type//p元素同一級別中的第乙個，在同乙個父元素下幾個p中的第乙個9）e:last-of-type 匹配同型別中的最後乙個同級兄弟元素e。
例如：
p:last-of-type10）e:nth-of-type(n) 匹配同型別中的第n個同級兄弟元素e。
例如：
p:nth-of-type(2)11）e:nth-last-of-type(n) 匹配同型別中的倒數第n個同級兄弟元素e。
例如：
p:nth-last-of-type(2)12）e:empty 匹配沒有任何子元素（包括text節點）的元素e。
例如：
div:empty//div中不能有任何內容test2.html:
我是ul的子元素4
我是段落p1
我是段落p2
我是段落p3
我是段落p4
我是段落p5
我是段落p6
我是段落p7
我是段落p8
錦瑟———李商隱
錦瑟無端五十弦，一弦一柱思華年。
莊生曉夢迷蝴蝶，望帝春心託杜鵑。
滄海月明珠有淚，藍田日暖玉生煙。
此情可待成追憶？只是當時已惘然。
搜尋單元格
單元格單元格
單元格 單元格
單元格單元格
單元格 單元格
單元格單元格
單元格 單元格
單元格單元格
單元格 單元格
單元格單元格
單元格 單元格
單元格單元格
單元格 單元格
單元格單元格
單元格 單元格
單元格單元格
單元格搜尋
style2.css:
/*:root*//*li:first-child*/
/*ul>li:first-child*/
/*p:first-child*/
/*td:last-child*/
/*li:only-child*/
/*p:only-of-type*/
/*tr:nth-child(2)*/
/*tr:nth-last-child(3n-1)*/
/*p:first-of-type*/
/*p:last-of-type*/
/*p:nth-of-type(2)*/
/*p:nth-last-of-type(2)*/
div:empty
2.ui偽類選擇器及其他選擇器
e:active 向被啟用的元素新增樣式。
例如：
a:active //當滑鼠點選時就處於啟用狀態e:hover 當滑鼠懸浮在元素上方時，向元素新增樣式。
例如：
a:hovere:link 向未被訪問的鏈結新增樣式。
例如：
a:linke:visited 向已被訪問的鏈結新增樣式。
例如：
a:visitede:focus 向擁有鍵盤輸入焦點的元素新增樣式。
例如：
input:focuse:lang 向帶有指定lang屬性的元素新增樣式
例如：
p:lang(en)css3新增：
input:checked 選擇每個被選中的input元素。
例如：
input:checked//被選中的時候新增樣式input:disabled 選擇每個禁用的input元素。
例如：
input:disabled//要將表單改成禁用的input:enabled 選擇每個啟用的input元素。
例如：
input:enabled#e:target 選擇當前活動的錨點元素。
例如：
:not(e) 選擇e元素之外的每個元素。例如：
:not(input)text2.html:
51自學網
註冊使用者
賬號 密碼
**號碼
電子郵件
同意服務條款：
不同意服務條款：
閱讀服務條款
註冊使用者
style2.css:
/*a:active*//*a:hover*/
/*a:visited*/
/*a:link*/
/*p:lang(en)*/
/*input:checked*/
/*input:enabled*/
/*input:focus*/
/*input:disabled*/
:not(input)
other notes:
placeholder屬性提供可描述輸入字段預期值的提示資訊（hint）。
該提示會在輸入欄位為空時顯示，並會在字段獲得焦點時消失。
placeholder屬性適用於以下的型別：text,search,url,telephone,email以及password。
css選擇器 偽類選擇器 屬性選擇器
偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...
屬性選擇器，偽類選擇器，偽元素選擇器
屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...
CSS偽類選擇器
原來學習過css偽類選擇器，前幾天寫css發現自己並不熟悉了。這兩天把它撿起來複習一下 css偽類選擇器是用於向某些元素新增特定的效果。錨偽類 包括四種狀態，活動狀態，未被訪問狀態，已被訪問狀態，懸停效果。example a link a visited a hover a active fist ...