: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 状态。
网友评论