一、hover伪类
hover伪类是最为人熟知的伪类。通过在样式表中应用:hover选择器,可以为某个元素在鼠标悬浮时设置样式。这可以让用户更加直观地了解自己正在与哪个元素交互。
下面是一个例子,当鼠标悬浮在超链接上时,将其文字内容变色:
a:hover { color: #ff0000; }
二、nth-child伪类
nth-child伪类允许您选择并样式化一组中的每个子元素。您可以使用:nth-child规则结合数字参数来选取子元素。这对于基于网格的布局和具有相同样式的操作非常有用。
下面是一个例子,将清单中的每个第二个列表项的颜色更改为淡蓝色:
ul li:nth-child(2n) { color: #3498db; }
三、visited伪类
visited伪类可以为先前已访问的链接元素设置样式。这对于确保用户知道自己已访问哪些链接非常有用。
下面是一个例子,当用户访问过链接时,链接的颜色将更改为浅灰色:
a:visited { color: #ccc; }
四、focus伪类
focus伪类可以为当前拥有输入焦点的元素(例如input文本框)设置样式。这对于提高页面的可访问性非常有用,因为它确保了有限的键盘用户可以轻松地导航页面中的元素。
下面是一个例子,当用户选择输入文本框时,文本框将以灰色边框呈现:
input:focus { border: 1px solid #ccc; }
五、checked伪类
checked伪类用于选择被选中的输入元素,例如单选按钮和复选框。这对于在表示用户选择时为元素提供视觉反馈非常有用。
下面是一个例子,当用户选择单选按钮时,该按钮将呈现为粗体:
input[type="radio"]:checked { font-weight: bold; }
六、active伪类
active伪类可以用于为处于活动状态或被点击但未释放的元素设置样式。这对于为用户提供清晰、立即响应的反馈非常有用。
下面是一个例子,当用户点击按钮时,按钮将在按下时变为深灰色:
button:active { background-color: #444; }