一、基礎選擇器
1、二、層次選擇器通配選擇器 *
2、元素選擇器e
3、id選擇器 #id
4、class.class
5、群組選擇器e,f
1、後代選擇器e f三、屬性選擇器2、子選擇器e>f
3、相鄰選擇器e+f
4、通用兄弟選擇器e~f
1、e[attr]選擇具有att屬性的e元素2、e[attr="val"]選擇具有att屬性且屬性值等於val的e元素。
3、e[attr~="val"]選擇具有att屬性且屬性值為一用空格分隔的字詞列表,其中乙個等於val的e元素
(包含只有乙個值且該值等於val的情況)。
4、e[attr^="val"]選擇具有att屬性且屬性值為以val開頭的字串的e元素。
5、e[attr$="val"]選擇具有att屬性且屬性值為以val結尾的字串的e元素。
6、e[attr*="val"]選擇具有att屬性且屬性值為包含val的字串的e元素。
7、e[attr|="val"]選擇具有att屬性且屬性值為以val開頭並用連線符"-"分隔的字串的e元素,如果屬性值僅為val,也將被選擇。
四、偽類選擇器
1、動態偽類選擇器e:link/e:visited/e:hover/e:active/e:focus2、目標偽類選擇器e:target匹配相關url指向的e元素
3、語言偽類選擇器
4、ui元素偽類選擇器
5、結構偽類選擇器
e:root匹配e元素在文件的根元素。在html中,根元素永遠是html
e:first-child匹配父元素的第乙個子元素e。
e:last-child匹配父元素的最後乙個子元素e。
e:only-child匹配父元素僅有的乙個子元素e。
e:nth-child(n)匹配父元素的第n個子元素e,假設該子元素不是e,則選擇符無效。
e:nth-last-child(n)匹配父元素的倒數第n個子元素e,假設該子元素不是e,則選擇符無效。
e:first-of-type匹配同型別中的第乙個同級兄弟元素e
e:last-of-type匹配同型別中的最後乙個同級兄弟元素e
e:only--of-type匹配同型別中的唯一的乙個同級兄弟元素e
e:nth-of-type(n)匹配同型別中的第n個同級兄弟元素e
e:nth-last-of-type(n)匹配同型別中的倒數第n個同級兄弟元素e
e:empty匹配沒有任何子元素(包括text節點)的元素e
五、偽元素選擇器
1、e:first-letter設定物件內的第乙個字元的樣式。2、e:first-line設定物件內的第一行的樣式。
3、e:before設定在物件前(依據物件樹的邏輯結構)發生的內容。用來和content屬性一起使用
4、e:after設定在物件後(依據物件樹的邏輯結構)發生的內容。用來和content屬性一起使用
5、e::placeholder設定物件文字佔位符的樣式。
6、e::selection設定物件被選擇時的樣式。
CSS3新特性與選擇器
圓角效果 border radius 10px 所有角都使用半徑為10px的圓角 border radius 5px 4px 3px 2px 四個半徑值分別是左上角 右上角 右下角和左下角,順時針 陰影 box shadow x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 投影方式...
css3的新特性選擇器 屬性選擇器
自己學css的時候比較亂,這次趁著複習把css3的新特性選擇器和css2以前不怎麼用的選擇器做乙個總結 div id parent p i m a example p p id one i m a example p p i m a example p p i m a example p p i m...
總結CSS3新特性 選擇器篇
css3新增了 p p選擇該屬性以特定值開頭的元素 選擇該屬性以特定值結尾的元素 選擇該屬性 現了特定值的元素 上邊三個是可以組合使用的,方法如 實際中可以應用在區分本地鏈結與外部鏈結,通過判斷是否有http com什麼的 等到css4選擇器問世就不用這麼麻煩了 local link 從字面大概能看...