CSS3的新特性 新增選擇器

2021-10-12 04:14:54 字數 1535 閱讀 2038

屬性選擇器可以根據元素特定屬性來選擇元素。這樣就可以不用借助於類或者id選擇器。

選擇符簡介

e[att]

選擇器選擇具有att屬性的e元素

e[att="val"]

選擇器選擇具有att屬性且屬性值等於val的e元素

e[att^="val"]

匹配具有att屬性且值以val開頭的e元素

e[att$="val"]

匹配具有att屬性且值以val結尾的e元素

e[att*="val"]

匹配具有att屬性且值含有val的e元素

結構為類選擇器主要根據文件結構來選擇器元素,常用於根據父級選擇器裡面的子元素。

選擇符簡介

e:first-child

匹配父元素中的第乙個子元素e

e:last-child

匹配父元素中的最後乙個子元素e

e:nth-child(n)

匹配父元素中的第n個子元素e

e:first-of-type

指定型別e的第乙個

e:last-of-type

指定型別e的最後乙個

e:nth-of-type

指定型別e的第n個

nth-child(n)與nth-of-type的區別:

nth-child(n)選擇某個父元素的乙個或者多個特定的子元素:

公式取值

2n偶數

2n+1

奇數5n

5 10 15...

n+5從第五個開始(包含第五個)到最後

-n+5

前五個(包含第五個)...

注意:類選擇器、屬性選擇器、偽類選擇器,權重為10。

偽元素選擇器可以幫助我們利用css建立新標籤元素,而不再需要html標籤,從而簡化html結構。

選擇符簡介

::befor

在元素內部的前面插入內容

::after

在元素內部的後面插入內容

注意:偽元素選擇器使用場景:

1)偽元素字型圖示效果如下圖

3) 偽元素清除浮動

CSS3 新增選擇器

新增選擇器 用法描述 element1 element2 p u選擇在同乙個父級元素下的p後面的所有的ul 選擇其 src 屬性值以 https 開頭的每個a元素 attribute value a src pdf 選擇其 src 屬性以 pdf 結尾的所有a元素 attribute value a...

css3新增選擇器

1.屬性選擇器 1 e att 元素 屬性 選擇具有att屬性的e元素,需要選擇有某個屬性的元素,而不論是行為是什麼,可以使用簡單的屬性選擇器 注 可以根據多個屬性進行選擇,只需要將屬性選擇器連線即可。2 e att val 元素 屬性 屬性值 選擇具有att屬性且屬性值為val的e元素,進一步縮小...

css3新增選擇器

屬性選擇器 1.dom attr 帶有attr的屬性會被選擇 2.dom attr value 帶有attr的屬性,並且值為value的元素會被選擇 3.dom attr value 帶有attr的屬性,並且值當中只要包含完整的value單詞,就會被選擇 4.dom attr value 帶有att...