溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css3有什么新增的選擇器

發(fā)布時間:2021-12-15 09:35:31 來源:億速云 閱讀:148 作者:小新 欄目:web開發(fā)

小編給大家分享一下css3有什么新增的選擇器,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

css3新增的選擇器:“[attribute^=value]”、“[attribute$=value]”、“[attribute*=value]”、“:first-of-type”、“:root”、“:empty”、“:target”等等。

本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

一、屬性選擇器:

1、[attribute^=value] 匹配屬性值以指定值開頭的每個元素。

2、[attribute$=value] 匹配屬性值以指定值結尾的每個元素。

3、[attribute*=value] 匹配屬性值中包含指定值的每個元素。

二、偽元素和偽類選擇器:

選擇器示例示例說明CSS
:first-of-typep:first-of-type選擇每個p元素是其父級的第一個p元素3
:last-of-typep:last-of-type選擇每個p元素是其父級的最后一個p元素3
:only-of-typep:only-of-type選擇每個p元素是其父級的唯一p元素3
:only-childp:only-child選擇每個p元素是其父級的唯一子元素3
:nth-child(n)p:nth-child(2)選擇每個p元素是其父級的第二個子元素3
:nth-last-child(n)p:nth-last-child(2)選擇每個p元素的是其父級的第二個子元素,從最后一個子項計數3
:nth-of-type(n)p:nth-of-type(2)選擇每個p元素是其父級的第二個p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)選擇每個p元素的是其父級的第二個p元素,從最后一個子項計數3
:last-childp:last-child選擇每個p元素是其父級的最后一個子級。3
:root:root選擇文檔的根元素3
:emptyp:empty選擇每個沒有任何子級的p元素(包括文本節(jié)點)3
:target#news:target選擇當前活動的#news元素(包含該錨名稱的點擊的URL)3
:enabledinput:enabled選擇每一個已啟用的輸入元素3
:disabledinput:disabled選擇每一個禁用的輸入元素3
:checkedinput:checked選擇每個選中的輸入元素3
:not(selector):not(p)選擇每個并非p元素的元素3
::selection::selection匹配元素中被用戶選中或處于高亮狀態(tài)的部分3
:out-of-range:out-of-range匹配值在指定區(qū)間之外的input元素3
:in-range:in-range匹配值在指定區(qū)間之內的input元素3
:read-write:read-write用于匹配可讀及可寫的元素3
:read-only:read-only用于匹配設置 "readonly"(只讀) 屬性的元素3
:optional:optional用于匹配可選的輸入元素3
:required:required用于匹配設置了 "required" 屬性的元素3
:valid:valid用于匹配輸入值為合法的元素3
:invalid:invalid用于匹配輸入值為非法的元素3

三、層級選擇器:

  • E~F

    通用選擇器 (找后面的所有同輩元素)

    選擇匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

以上是“css3有什么新增的選擇器”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI