如同人類的的進化一樣,css3
是css2
的進化版本
,在css2基礎上
,增強或新增了許多特性, 彌補了css2
的眾多不足之處,使得web開發
變得更為高效
和便捷
css
當js
用
js
當後台語言用
瀏覽器支援程度差,需要新增私有字首(移動端)
a).-webkit-
谷歌(google)
b).-moz-
火狐(firefox)
c).-o-
歐鵬(opera)
d).-ms-
ie(internet explorer)
e).-khtml-
konqueror
移動端
支援優於pc端
不斷改進中
應用相對廣泛
簡述:css3
新增了許多靈活查詢元素
的方法,極大的提高了查詢元素的效率和精準度
。css3選擇器
與jquery
中所提供的絕大部分選擇器相容
3.1 屬性選擇器
[屬性名]
表示存在xx
屬性的元素;
[attr = val]
表示屬性值等於val
的元素;
[attr *= val]
表示的屬性值裡包含val字元
並且在任意位置
;
[attr ^= val]
表示的屬性值裡包含val字元
並且在開始位置
;
[attr $= val]
表示的屬性值裡包含val字元
並且在結束位置
;
3.2 偽類選擇器
之前學習的:
a:link
(超連結從未被訪問過的狀態)
a:visited
(超連結訪問過後的狀態)
a:hover
(滑鼠懸停狀態)
a:active
(滑鼠按下狀態)
css3
新增的偽類選擇器
《偽類選擇器-a組》 序號
選擇器示例
示例描述
1:first-child
li:first-child
必須是li元素,必須是第乙個子元素
2:last-child
li:last-child
必須是li元素,必須是最後乙個子元素
3:nth-child(n)
a:nth-child(5)
必須是a元素,必須是第五個子元素(2n、even表示偶數,2n+1、odd表示奇數)
4:nth-last-child(n)
a:nth-last-child(n)
同:nth-child(n) 相似,只是倒著計算
《偽類選擇器-b組》 序號
選擇器示例
示例描述
1:first-of-type
li:first-of-type
必須是子元素中第乙個li元素(可以不是第乙個子元素)
2:last-of-type
li:last-of-type
必須是子元素中最後乙個li元素(可以不是最後乙個子元素)
3:nth-of-type(n)
li:nth-of-type(5)
必須是子元素,必須是第五個li元素
《偽類選擇器-c組》 序號
選擇器示例
示例描述
1:empty
li:empty
選中沒有任何子節點的li元素(空格也運算元節點)
2:target
li:target
結合錨點進行使用,處於當前錨點的元素會被選中
3:root
:root
選中根標籤(html)
3.3 偽元素選擇器
簡述:
通常用來生成並選中某個元素內部的第乙個子元素
或最後乙個子元素
,此元素沒有名字,為匿名元素
《偽元素選擇器》 序號
選擇器示例
示例描述
1::before
span::before
生成並選中span的第乙個子元素,預設行盒
2::after
span::after
生成並選中span的最後乙個子元素,預設行盒
3::first-letter
p::first-letter
選中元素中第乙個字母、文字
4::first-letter
p::first-letter
選中元素中第一行的字母、文字
5::selection
p::selection
選中使用者用滑鼠框選的部分字母、文字(通常設定一些顏色,寬高文字大小之類的屬性設定無效)
css3選擇器篇
標籤選擇器 陳業貴陳業貴 陳業貴陳業貴 核心 給html標籤設定相應的css屬性。精確的 id選擇器 identity1 1111 identity2 1111 identity3 1111 identity4 1111 核心 唯一 同一頁面內 標籤命名規則 4.1id的名稱只能由字母 數字 下劃線...
CSS3 選擇器篇
想想我們之前用過的css 選擇器,有標籤選擇器,有類 class 選擇器,有id id 選擇器,有後代選擇器,有群組選擇器,還有基於以上延伸出來的選擇器,例如 div class 等這類混合行選擇器。css3新增了很多特性,圓角 邊框 背景 選擇器等 每乙個都拯救 web開發人員於水火之中,接下來,...
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...