面試題：CSS偽類選擇器有哪些？CSS3新增的偽類選擇器有哪些？

CSS偽類選擇器：

a:link 沒有訪問之前a標簽的樣式

a:visited 已訪問a標簽的樣式

a:hover a標簽鼠標移上的樣式

a:actived a標簽鼠標按下的樣式

input:focus input表單元素獲取焦點

input:blur input表單元素失去焦點

CSS3新增的偽類選擇器：

:checked 被選中 主要用在input表單元素上

:not 排除

:last-child 最后一個元素

:nth-child(n)  n表示具體的第幾個  odd/2n+1 奇數 even/2n 偶數

:only-child 僅僅/唯一的元素

:nth-last-child(n) 倒數第幾個元素  :nth-last-child(1) <=> :last-child

:first-of-type 第一個同級兄弟元素

:last-of-type 最后一個同級兄弟元素

:only-of-type 只有一個同級兄弟元素

:nth-of-type(n) 第幾個同級兄弟元素

:nth-last-of-type(n) 倒數第幾個同級兄弟元素

:empty 空內容

<style> 
    ul li{
        float: left;
        list-style: none;
        width: 100px;
        height: 50px;
        background: red;
    }
    /* 排除最后一個li沒有右邊框線 其余都有，排除了內容為$3的li */
    ul li:not(:last-child){
        border-right: 10px solid #000;
    }
    /* 第一個li背景元素為blue,改變的是內容為$1的li的樣式 */
    ul li:nth-child(1){
        background-color:blue;
    }
    /* 偶數位背景元素為yellow，改變的是內容為$2的li的樣式 */
    ul li:nth-child(even){
        background-color:yellow;
    }  
    /* ul只有一個li子元素，改變的是內容為$4的li的樣式 */
    ul li:only-child{
        background-color: green;
    }
</style>

<ul>
    <li>$1</li>
    <li>$2</li>
    <li>$3</li>
</ul>
<ul>
    <li>$4</li>
</ul>

<style>
    p:first-of-type{
        background-color: red;
    }
    p:last-of-type{
        background-color: yellow;
    }
    p:only-of-type{
        background-color:blue;
    }
    p:nth-of-type(2){
        background-color: green;
    }
    p:nth-last-of-type(3){
        background-color: purple;
    }
    p:empty{
        height: 20px;
        background-color: orange;
    }
</style>

<div>我是一個div元素</div>
<p>我是一個p元素</p>
<p>我是一個p元素</p>
<p>我是一個p元素</p>
<p></p>
<p>我是一個p元素</p>
<div>
　　<p>我是一個p元素</p>
</div>