:link
:visited
:active
:hover
:focus
- :link
<style>
a:link{background-color: red}
div:link{background-color: green}
</style>
<body>
<a>1-1</a>
<a href="">1-2</a>
<div href="">1-3</div>
</body>
:link 只能用于 a 標(biāo)簽，并且標(biāo)簽帶有 href 屬性時(shí)，才會(huì)匹配到。
- :visited
<style>
a:link{background-color: red}
a:visited{background-color: green}
</style>
<body>
<a href="#1">1-1</a>
<a href="#2">1-2</a>
<a href="#2">1-3</a>
</body>
當(dāng)點(diǎn)擊 1-2 中的鏈接后，1-2會(huì)應(yīng)用到 :visited 狀態(tài)。同時(shí)由于 1-3 與 1-2 訪問的鏈接一樣，1-3 也會(huì)變成綠色。
- :active
<style>
a:link{background-color: red}
a:active{background-color: green}
button:active{background-color: yellow}
</style>
<body>
<a href="#1">1-1</a>
<button>按鈕1</button>
</body>
表示元素被鼠標(biāo)按下，但未松開前的狀態(tài)。適用于所有元素，該狀態(tài)在移動(dòng)端瀏覽器下無效。
- :hover
<style>
a:hover{background-color: yellow}
button:hover{background-color: yellow}
span:hover{background-color: yellow}
div:hover{background-color: yellow}
</style>
<body>
<a href="#1">1-1</a>
<button>按鈕1</button>
<span>1-3</span>
<div>1-4</div>
</body>
表示元素在鼠標(biāo)進(jìn)入時(shí)匹配該樣式，移出元素后會(huì)被取消。適用于所有元素，該狀態(tài)在移動(dòng)端瀏覽器下無效。
- :focus
<style>
a:focus{background-color: yellow}
button:focus{background-color: yellow}
span:focus{background-color: yellow}
div:focus{background-color: yellow}
input:focus{background-color: yellow}
</style>
<body>
<a href="#1">1-1</a>
<button>按鈕1</button>
<span>1-3</span>
<div>1-4</div>
<input value="1-5">
</body>
a、 button 標(biāo)簽在 PC 端被點(diǎn)擊后可以應(yīng)用到 focus 狀態(tài)，在移動(dòng)端則不能。div、span 則無論如何都無法應(yīng)用到 focus 狀態(tài)。表單元素在兩個(gè)端都能正常應(yīng)用到 focus 狀態(tài)。
