首頁 > web前端 > css教學 > CSS3常用的幾種選擇器

CSS3常用的幾種選擇器

php中世界最好的语言
發布: 2017-11-24 13:19:56
原創
2188 人瀏覽過

在1990年代初HTML誕生後,在96年底就有CSS誕生了,CSS是專門定義網頁的基本屬性的,那麼在CSS3中,常用的選擇器有哪些?今天就來跟大家介紹一下。

HTML的誕生 20世紀90年代初

1996年底,    CSS第一版誕生

1998年5月   CSS2正式發表

#2004年 CSS2 .1發布

CSS3的發布    2002  2003  2004 2005  2007 2009 2010

模塊化開發

CSS1 中定義了網頁的基本屬性:

字體、顏色、基本選擇器

CSS2中在CSS1的基礎上新增了進階功能

浮動與定位、進階選擇器等(子選擇器、相鄰選擇器、通用選擇器)

CSS3遵循的是模組化開發。發佈時間不是一個時間點,而是一個時段。

通用選擇器:*  選擇到所有的元素

選擇子元素:> 選擇到元素的直接後代

#鄰近兄弟選擇器:+ 選擇到緊接在目標元素後的第一個元素

普通兄弟選擇器:~ 選擇到緊接而來的所有兄弟元素

:nth-child 選擇指定索引處的子元素

         nth-child(n) 父元素下的第n個子元素

         nth-child(od )偶數子元素

:nth-last-child(n) 倒數第n個子元素

:nth-of-type(n) 父元素下的第n個指定類型的子元素

:nth-last-of-type父元素下的倒數第n個指定類型的子元素

:first-child 選擇父元素下的第一個子元素

:last-child 選擇父元素下的最後一個子元素

:only-child 選擇父元素下唯一的子元素

:only-of-type選擇父元素下指定類型的唯一子元素

:root 選擇文件的根目錄,回傳html

#E[attr] 屬性名,不確定特定屬性值

##E[attr ="value"] 指定屬性名,並指定其對應屬性值

E[attr ~="value"] 指定屬性名,其具有多個屬性值空格隔開,並包含                       

E[attr ^= "value"] 指定屬性名,屬性值以value開頭

E[attr $="value"] 指定屬性名,屬性值以value結束

#E[attr *="value"] 指定了屬性名,屬性值包含了value

#E[attr |= "value"] 指定屬性名,屬性值以value-開頭

UI偽

類別選擇器

         :enabled 選擇啟用狀態元素

          的input元素(單選按鈕或複選框)

         :default 選擇預設元素

        in-range、out-of-range 選擇指定範圍之內或以外受限的元素

         :repuired、optional 依據是否允許:required屬性選擇input元素

#動態動態偽類選擇器

 :link 選擇連結元素

 :visited 選擇使用者以存取的元素

 :hover 滑鼠懸停其上的元素

 :ative 滑鼠點擊時觸發的事件

 :focus 目前取得焦點的元素

其他偽類選擇器:

 :not(<選擇器>) 對括號內選擇器的選擇取反

 :lang(<目標語言>) 基於lang

全域屬性

的元素

 :target url片段識別碼指向的元素

     :empty選擇內容為空的元素

 :selection 滑鼠遊標選擇元素內容

關於CSS3的選擇器就是這些了,更精彩請關注php中文網其它相關文章!

相關閱讀:

CSS3有哪些新增的背景屬性


怎麼用CSS3媒體查詢

css3的彈性盒怎麼做來

以上是CSS3常用的幾種選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板