08 CSS 伪类选择器

5/12/2021 html

伪类 - CSS(层叠样式表) | MDN (opens new window)

CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

# 超链接伪类

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

选择器

  • a:visited :已被访问状态。
  • a:link :未访问状态。
  • a:hover :鼠标悬停状态。
  • a:active :用户激活。

语法

a:link { color: green; } /*link:未访问的链接*/
a:visited { color: blue; } /*visited:已访问的链接*/
a:hover { color: red; } /*hover:当鼠标移动到链接上,则改变成红色*/
a:active { color: yellow; } /*active:当你鼠标选定该元素,则改变成黄色*/

# 表单:focus

:focus 表单获得焦点时触发样式。

input:focus { background-color: yellow; }

# first-child

:first-child 伪类来选择元素的第一个子元素。

:first-child / :last-child / :nth-child(number)

p:first-child {font-weight: bold;}
更新时间: Wednesday, May 12, 2021 23:10