css3新增屬性02

標籤：checked   水平   類型   介面   字母   動態   empty   基礎   第一個   

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