CSS3 選擇器篇

2021-10-10 21:48:36 字數 2765 閱讀 5879

如同人類的的進化一樣,css3css2進化版本,在css2基礎上,增強或新增了許多特性, 彌補了css2的眾多不足之處,使得web開發變得更為高效便捷

cssjs

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 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...