css3系列之偽類選擇器

 Pseudo-Classes Selectors(偽類選擇器)

　　E:not(s)　　E:root　　E:target

　　E:first-child　　E:last-child　　E:only-child　　E:nth-child(n)　　E:nth-last-child(n)   

這上面一行的選擇器，都會考慮其他元素的的影響。

　　E:first-of-type　　E:last-of-type　　E:only-of-type　　E:nth-of-type(n)　　E:nth-of-last-type(n)   

這上面的選擇器，不會考慮其他元素的的影響。

　　E:empty　　E:checked　　E:enabled　　E:disabled

　　E:read-only　　E:read-write

 

　　E:not()

這個選擇器的意思是，選中除了誰。 ()里面填條件，也就是選擇器。

一般的最常見的應用場景呢，添加下划線的時候

 

　　E:root

選擇根目錄的意思，在我們的html文件里面，他是選 html標簽 也就是  html標簽選擇器。但是呢，如果換成xml呢，他的根目錄就不一定是 html了吧。所以有人說 root就是html，那是錯誤的

要用的話，直接寫  :root{ background-color:red;} 即可 相當於 html:{ background-color:red;} 

　　

　　E:target

URL后面跟錨點#，指向文檔內某個具體的元素。 也就是說，url后面的錨點，指向  某個元素， 那么該元素就會觸發 target

 

下面一個小demo

 

 

 

　　E:first-child　　E:last-child  

E:first-child選擇父元素下的第一個子元素， 和E:last-child選擇父元素下最后一個子元素，看到這句話，可能會有點誤解。 前提是， 他必須有父元素，最高層是body

<div>
    <p></p>  
    <p></p>
</div>

看到上面的代碼， 如果你想選  div下面的第一個p 的話， 不應該這么寫。

div:first-child{
    background-color: red;
}

/* 應該是寫成下面的 */
p:first-child{
    background-color: red;
}

why?　 因為填的是你要選擇的本身，也就是你要選擇p   他是會在 p的父元素找， 你這個p標簽，是不是父元素下的 第一個。

下面的代碼你還是會選不到

<div>
    <span></span>
    <p></p>
    <p></p>
</div>

p:first-child{   //因為現在的 p的父元素， 第一個子元素， 是span   所以你選不到
    background-color: red;
}

 

　　E:only-child

選擇，父元素下的 獨生子，也就是說，看父元素下面的子元素，是不是僅有一個。是的話，那就選中

 

　　E:nth-child(n)

 選擇父元素下面的 第幾個子元素，(n) 可以計算， n是從0 開始的， 但是 css里面的索引是從1 開始的，  js的數組什么是從0. 但是css不是

 

 　　E:nth-last-child(n)

跟上面的選擇器大同小異， 只不過人家是從 最后一位開始查數。 填(1) 選的是最后一位。

 

以上的這5個選擇器都會受到 其他元素的影響， 例如父元素下面第一個不是他的話，就選不了。 

但是以下五個選擇器，不會受到其他元素的影響。

 

　　E:first-of-type

意思是，在父元素下面尋找 第一個所匹配的子元素。 下面的ul  和li，在ul 里面找到第一個li

 

 

　　E:last-of-type

在有父元素的里面找最后一個 E 跟上面的選擇器一樣， 他選的是第一個， 這個選的是最后一個

 

　   E:only-of-type

匹配父元素的所有子元素中唯一的那個子元素

 

 

　　E:nth-of-type(n)

匹配父元素的第n個子元素，跟 E:nth-child(n)  差不多。 不過 nth-child 會受到其他元素影響， 而nth-of-type 不會 怎么回事的，看下面例子

 

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

跟 E:nth-of-type(n) 相反的， E:nth-of-type(n)是按照 第一個開始查，  這個是按照倒數第一位查

 

　　E:empty

匹配里面沒有任何東西的元素。也就是說，你選擇的那個元素，里面不要有東西才可以選中。

　

　　E:checked

匹配用戶界面上處於選中狀態的元素E。(用於input type為radio與checkbox時)

 

 

 　　

　　E:enabled　　和　　E:disabled

用於選擇 input的 正常狀態，和  不可操作狀態。 沒設置disabled 屬性的 input  就是正常狀態

 

　　E:read-only　　E:read-write

readonly 呢 是input 標簽上的屬性， 設置了這個屬性后，就是不可以填寫，也不可以操作

E:read-write：也就是選中沒有設置readonly。用處不大