css3新增選擇器

2021-08-28 10:25:40 字數 1250 閱讀 3879

屬性選擇器:

1.dom[attr]:帶有attr的屬性會被選擇

2.dom[attr = value] :帶有attr的屬性,並且值為value的元素會被選擇

3.dom[attr ~= value] :帶有attr的屬性,並且值當中只要包含完整的value單詞,就會被選擇

4.dom[attr *=value] : 帶有attr的屬性,並且值當中只要包含value就可以被選中

5.dom[attr ^= value]:帶有attr的屬性,並且以value值開頭就會被選中

6.dom[attr $=value] : 帶有attr的屬性,並且以value值結尾就會被選中

7.dom[attr |=value] : 帶有attr屬性,並且以vlaue - 值開頭就會被選中

偽類選擇器:

1、:nth-of-type(n),nth-last-of-type(n):first-of-type,:last-of-type 同一型別中的第n個孩子,n從1開始,奇數odd,偶數even;同一型別中,從倒數開始算第n個元素;同一型別中的第乙個元素、最後乙個元素

2、:first-child、:last-child、:nth-child(n)、nth-last-child(n)、父元素的第乙個孩子、最後乙個孩子、第n個孩子,從倒數開始的第n個元素

3、:first-line/:first-letter,選擇元素的第一行、元素的第乙個首字母;

層級元素:

1、後代元素:空格 div p{},父元素為div,後代有p標籤的

2、子代元素 :> div>p{},父元素是div,其第一代是p標籤的

3、同級元素 : + div+p{},同級元素,div後面緊跟著的p元素,同級

4、同級元素 : ~ div~p{},同級元素,div後面的所有p元素,同級

根元素::root文件的根元素,注意與body元素的區別,兩個都同時選擇時,個管個的,只寫乙個,整個文件都會變

:empty:空元素,p:empty{} 為空的p標籤,空的是裡面的文字節點個屬性節點都沒有

:target:url 帶有後面跟有錨名稱 #,指向文件內某個具體的元素id。這個被鏈結的元素就是目標元素(target element)。

表單元素選擇器:

:enabled 被啟用

:disabled 被禁用

:checked 被選中

:focus 獲取焦點

::selection 選中後的文字樣式

:not(selector) 否定,表示除了.....

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.e f子選擇器 選擇匹配的f元素,且匹配的f元素所匹配的e元素的子元素 2.e f相鄰兄弟選擇器 選擇匹配的f元素,且匹配的f元素緊位於匹配的e元素的後面 3.e f通用選擇器 選擇匹配的f元素,且位於匹配的e元素後的所有匹配的f元素 二 屬性選擇器 1.e attr 只使用屬性...