CSS3中的選擇器

css3介紹

css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。

css3的現狀

屬性選擇器

屬性選擇器的標誌性符號是。如先建立:

周一周二週三周四周四

格式：

e[title]選中頁面的e元素，並且e存在 title 屬性即可。

/*p標籤有class屬性*/
p[class]

e[title="abc"]選中頁面的e元素，並且e需要帶有title屬性，且屬性值完全等於abc。

/*找到有'class=now'p標籤*/
p[class='now']

e[title^="abc"]選中頁面的e元素，並且e需要帶有 title 屬性,屬性值以 abc 開頭。

p[class^='no']

e[title$="abc"]選中頁面的e元素，並且e需要帶有 title 屬性,屬性值以 abc 結尾。

/* 找到class以'th'結尾的p標籤*/
p[class$='th']

e[title*="abc"]選中頁面的e元素，並且e需要帶有 title 屬性,屬性值任意位置包含abc。

/* 找到包含'n'的class的p標籤 */
p[class*='n']

e[attr~=val] 選擇具有 att 屬性且屬性值為：用空格分隔的字詞列表，其中乙個等於 val 的e元素。

e[attr|=val] 表示要麼是乙個單獨的屬性值，要麼這個屬性值是以「-」分隔的。

結構偽類選擇器

偽類選擇器的標誌性符號是:。

css中有一些偽類選擇器，比如:link、:active、:visited、:hover，這些是動態偽類選擇器。

css3又新增了其它的偽類選擇器。這一小段，我們來學習css3中的結構偽類選擇器：即通過結構來進行篩選。

1、格式：（第一部分）

理解：（1）這裡我們要好好理解父元素的含義，它指的是：以 e 元素的父元素為參考。

（2）注意：以上選擇器中所選到的元素的型別，必須是指定的型別e，如果選不中，則無效。這個要好好理解，具體可以看css參考手冊中的e:nth-child(n)的示例。我們可以理解成：先根據選擇器找到選中的全部位置，如果發現某個位置不是型別e，則該位置失效。

（3）另外，e:nth-child(n)這個屬性也很有意思。比如，針對下面這樣一組標籤：

上面列舉的選擇器中，我們只要記住：n表示 0,1,2,3,4,5,6,7,8…..就很容易明白了。

2、格式：（第二部分）

既然上面這幾個選擇器帶有type，我們可以這樣理解：先在同級裡找到所有的e型別，然後根據 n 進行匹配。

3、格式：（第三部分）

偽元素選擇器

偽元素選擇器的標誌性符號是 ::。

1、格式：（第一部分）

e:after、e:before在舊版本裡是偽類，在 css3 這個新版本裡是偽元素。新版本裡，e:after、e:before會被自動識別為e::after、e::before，按偽元素來對待，這樣做的目的是用來做相容處理。

2、格式：（第二部分）