: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 標簽，并且標簽帶有 href 屬性時，才會匹配到。
- :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>
當點擊 1-2 中的鏈接后，1-2會應用到 :visited 狀態。同時由于 1-3 與 1-2 訪問的鏈接一樣，1-3 也會變成綠色。
- :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>
表示元素被鼠標按下，但未松開前的狀態。適用于所有元素，該狀態在移動端瀏覽器下無效。
- :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>
表示元素在鼠標進入時匹配該樣式，移出元素后會被取消。適用于所有元素，該狀態在移動端瀏覽器下無效。
- :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 標簽在 PC 端被點擊后可以應用到 focus 狀態，在移動端則不能。div、span 則無論如何都無法應用到 focus 狀態。表單元素在兩個端都能正常應用到 focus 狀態。
