CSS3新特性(二)選擇器

2021-08-05 22:53:02 字數 2034 閱讀 3603

一、基礎選擇器

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:focus

2、目標偽類選擇器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 從字面大概能看...