css3新增屬性02
阿新 • • 發佈:2017-08-04
無效 置1 中一 層次選擇器 checked r+ -o rst before
CSS3 選擇器
基礎選擇器
- 通配符選擇器 *
- ID選擇器 #Id
- class選擇器 .classname
- 元素選擇器 tagName
- 群組選擇器 slecter,selecter
層次選擇器
- 後代選擇器 selecter selecter
- 子元素選擇器 selcter>selecter
- 相鄰兄弟選擇器 selecter+selecter
- 通配兄弟選擇器 selecter~selecter
屬性選擇器
- selecter[attr] 包含attr屬性的元素
- selecter[attr=val] attr屬性值是val的元素
- seldcter[attr^=val] attr屬性值是以val開頭的元素
- selecter[attr$=val] attr屬性值是以val結束的元素呢
- selecter[attr~=val] attr屬性值val 或 包含val(兩個值以空格隔開,其中一個是val)
- selecter[*=val] attr屬性值中包含val的元素
- selecter[|=val] attr屬性值是val或值是 val=*
偽類選擇器
-
動態偽類選擇器
- :hover
- :link
- :visited
- :active
- :focus
-
目標偽類選擇器
- :target
-
語言偽類選擇器
- :lang(ch)
-
UI元素偽類選擇器
- :enabled 匹配用戶界面上處於可用狀態的表單元素
- :diabled 匹配用戶界面上處於禁止狀態的表單元素
- E:checked 匹配用戶界面上處於選中狀態的元素E。(用於input type為radio與checkbox時)
-
結構偽類選擇器
- :root 根元素選擇器。在HTML中,根元素 永遠是HTML
- E:first-child 匹配父元素的第一個子元素
- :last-child 匹配父元素的最後一個子元素
- nth-child(n) 匹配父元素的第N個子元素E,假設該子元素不是E,則選擇符無效
- nth-last-child(n) 匹配父元素的倒數第N個子元素E,假設該子元素不是E,則選擇符無效
- only-child 匹配父元素僅有一個子元素E
- first-of-type 匹配同類型中的第一個同級兄弟元素
- last-of-type 匹配同類型中的最後一個同級兄弟元素
- nth-of-type(n) 匹配同類型中第n個同級兄弟元素
- nth-last-of-type() 匹配同類型中倒數第n個同級兄弟元素
- only-of-type() 匹配同類型中唯一一個同級兄弟元素
- empty 匹配空的元素(不能有子元素也不能有內容)
-
否定偽類選擇器
- not(selecter)
偽元素選擇器
- :first-letter / ::first-letter 第一個字母
- :first-line / ::first-line 第一行
- : before / ::before 設置在對象前發生的內容,用來和content屬性一起使用,content後面可跟文字或圖片。一般默認加入的內容為行內元素
- : after / ::after 設置在對象後發生的內容,
- ::placeholder 設置對象文字占位符的樣式
- ::selection 設置對象被選擇時的樣式
CSS新增邊框屬性
圓角
-
border-radius設置或檢索對象使用圓角邊框。提供2個參數,2個參數以“/”分隔,每個參數允許設置1~4個參數值,第1個參數表示水平半徑,第2個參數表示垂直半徑,如第2個參數省略,則默認等於第1個參數 水平半徑:如果提供全部四個參數值,將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。 如果只提供一個,將用於全部的於四個角。 如果提供兩個,第一個用於上左(top-left)、下右(bottom-right),第二個用於上右(top-right)、下左(bottom-left)。 如果提供三個,第一個用於上左(top-left),第二個用於上右(top-right)、下左(bottom-left),第三個用於下右(bottom-right)。 垂直半徑也遵循以上4點。 對應的腳本特性為borderRadius。
-
border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
盒子陰影
- box-shadow:length1,length2,length3,length4,color ,inset
- length1:用來設置對象的陰影水平 偏移值,可以為負值
- length2:用來設置對象的陰影豎直 偏移值,可以為負值
- length3:用來設置對象的陰影模糊值,不可以為負值
- length3:用來設置對象的陰影外延值(陰影寬度),不可以為負值
- color:用來設置陰影顏色
- inset設置對象的陰影對象為外陰影。該值為空時,則對象的陰影類型為外陰影
css3新增屬性02