css3新增屬性02

來源:互聯網
上載者:User

標籤: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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.