CSS3選擇器的新增和改動有哪些?

隨著網絡的發展 ， 不光是HTML標記語言做出了重大修改也就是我們說的H5 ， 我們的css樣式也發生了很大的改動 ， CSS3簡稱C3也給我們帶來了很多大的改變 ， 不但增加改動了比如屬性選擇器 ，結構偽類選擇器 ，偽元素選擇器 ，還有2D轉換、移動、旋轉和縮放屬性以及3D和動畫等等一些新的功能

CSS3現狀 目前來說對pc端瀏覽器支持程度某些方面比較差，有些需要添加私有前綴 ,才能運行 ,移動端(手機 ,平板)支持優於PC端 ,所以在做H5頁面的時候 ,不考慮PC時完全可以放心使用 , 現在移動端瀏覽器時時刻刻都在更新 , 完全不用考慮兼容性 .

下面讓我們首先來了解一下C3的選擇器的改動有哪些 ,以及怎麼運用吧！

1.CSS3屬性選擇器

屬性選擇器的使用常見的有下面5種:

(1)E[att] 選擇具有att屬性的E元素。(任何屬性比如type name disabled id等等)

只會選擇帶有disabled屬性

(2)E[att="val"] 選擇具有att屬性且屬性值等於val的E元素。

會選中下面兩個改變顏色

(3)E[att^="val"] 選擇具有att屬性且屬性值為以val開頭的字符串的E元素。

icon開頭的圖標1和2會變顏色

(4)E[att$="val"] 選擇具有att屬性且屬性值為以val結尾的字符串的E元素

icon結尾的只有圖表5會變成綠色

(5)E[att*="val"] 選擇具有att屬性且屬性值為包含val的字符串的E元素。

只要包含icon都會bian'lan

打開瀏覽器1-5都變藍色

2.CSS3 結構偽類選擇器

偽類選擇符其實我們在之前已經說過一些了，只不過C3又給我們增加了一些運用方式 ,比如之前的E:hover選擇E元素在滑鼠經過時改變樣式這類

那麼新增的方式有哪些呢?

(1)E:first-child

選擇元素E的第一個孩子

列表一會變轟

(2)E:last-child

匹配E元素的最後一個孩子和上面一樣

(3)E:nth-child(n) E:nth-last-child(n)

匹配到父元素的第n個元素 或者 是倒數第n個元素

匹配到父元素的第2個子元素 ---- ul li:nth-child(2){} (括號裡面數字可以任意改變去匹配對應的元素來改變樣式)

匹配到父元素的倒數第2個子元素 ---- ul li:nth-last-child(2){}

匹配到父元素的序號為奇數的子元素 ---- ul li:nth-child(odd){}odd是關鍵字 奇數的意思

匹配到父元素的序號為偶數的子元素 ---- ul li:nth-child(even){}even 偶數

匹配到父元素的前4個子元素 ---- ul li:nth-child(-n+4){}

(4)E:nth-of-type(n)

匹配同類型中的第n個同級兄弟元素E

它會匹配span2變紅色

雖然span1是div裡面的第二個元素 , 但是它選擇的是同類型的元素的第二個 ,只有這一點不同 ,其他地方和上面的一樣 可以選擇最後一個或第n個

3.CSS3 偽元素選擇器

(1)E::before 在E元素前插入一個元素

創建一個兔哥盒子

通過偽元素選擇器可以在這個盒子前面(before)插入一個盒子 ,這個盒子會在兔哥前面

粉色盒子就是通過偽元素加上的

(2)E::after 在E元素後插入一個元素

同樣的盒子

通過偽元素選擇器在元素後面加入一個

(3)E::first-letter 選擇到了E容器內的第一個字母

(4)E::first-line 選擇到了E容器內的第一行文本

注意:

偽元素裡面必須寫上屬性content:"";

偽元素只能給雙標籤(例如<div></div>)加 ,不能給單標籤(比如<input/>這種單標籤)

關於CSS3選擇器的新增和改動就這些了,明天說一些2D轉換、移動、旋轉和縮放屬性以及3D和動畫相關的用法 ,希望多多關注 ,多多交流