CSS3選擇器的應用

CSS選擇器
在CSS中,有三種最基本的選擇器,分別是標籤選擇器、類選擇器和ID選擇器。
1.標籤選擇器:h1,h2…h6,p,img等CSS標籤選擇器就是來聲明這些標籤的
2.類選擇器:類選擇器的名稱可以由用戶自定義,必須符合CSS規範,屬性和值跟標籤選擇器一樣。
語法結構爲:這裏寫圖片描述

3.ID選擇器:ID選擇器的使用方法與類選擇器基本相同,不同之處在於ID選擇器只能在HTML頁面中使用一次,
因此它的針對性更強
三種基本選擇器的優先級:ID選擇器>class類選擇器>標籤選擇器。

CSS3的高級選擇器
1.層次選擇器 2.結構爲類選擇器 3.屬性選擇器
1.層次選擇器:通過HTML的文檔對象模型元素間的層次來選擇元素,其主要的層次關係包括後代、父子、相鄰兄弟和通用兄弟等幾種關係,通過他們之間的關係可以快速選定 需要的元素。
E F 後代選擇器 選擇匹配的F元素,且匹配的F元素被包含在匹配的E元素內
E>F 子選擇器 選擇匹配的F元素,且匹配的F元素是匹配的E元素的子元素
E+F 相鄰兄弟選擇器 選擇匹配的F元素,且匹配的F元素緊位於匹配的E元素後面
E~F 通用兄弟選擇器 選擇匹配的F元素,且位於匹配的E元素後的所有匹配的F元素
2.結構僞類選擇器:僞類可以將一段並不存在的HTML當做獨立的元素來定位,或者是找到無法使用的其他簡單選擇器就能定位到切實存在的元素上。這種選擇器可以根據元素 在文檔樹中的某些特性定位到他們。
所有結構僞類都是基於HTML文檔樹的,也稱爲文檔對象模型,文檔樹是HTML頁面的層級結構,它由元素、屬性和文本組成,他們都是一個節點。
E:first-child作爲父元素的第一個子元素的元素E
E:last-child作爲父元素的最後一個元素的元素E
E F:nth-child(n)選擇父級元素E的第n個元素F(n可以使1、2、3),關鍵字爲even、odd
E:first-of-type選擇父元素內具有指定類型的第一個E元素
E:last-of-type選擇父元素內具有指定類型的最後一個E元素
E F:nth-of-type(n)選擇父元素內具有指定類型的第n個F素
3.屬性選擇器:在HTML中,可以給元素設置各種各樣的屬性,入ID、class、title、href等。通過各種各樣的屬性可以選擇到元素併爲其設置樣式,這是非常方便的
E[attr] 選擇匹配具有attr的E元素
E[attr=val]選擇匹配具有attr的E元素,並且屬性值爲val(其中val區分大小寫)
E[attr^=val]選擇匹配元素E,且E元素定義了屬性val,其屬性值是以val開頭的任意字符串
E[att$=val]選擇匹配元素E,且E元素定義了屬性attr,其屬性值事宜val結尾的任意字符串
E[attr*=val]選擇匹配元素E,且E元素定義了屬性attr,其屬性值包含了“val”,換句話說,字符串val與屬性值中的任意位置相匹配

發佈了4 篇原創文章 · 獲贊 17 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章