1. 简介
CSS 用户选择属性是 CSS3 中引入的一种新的选择器,它能够让开发者根据用户在页面上的行为和状态来设置样式。CSS 用户选择属性包括多个子属性,包括`:active`、`:focus`、`:hover`、`:link`、`:visited`等,这些属性能够让页面在用户进行操作时产生动态的效果,从而提升页面的交互性和用户体验。
2. :hover
2.1 简介
`:hover`选择器可以用来选中当用户将鼠标悬停在其上时的元素,并且能够让我们为这些元素设置特殊的样式。这个选择器通常被用来创建鼠标悬停特效,如下面的例子:
button:hover {
background-color: #ff0000;
}
这里的选择器会选中鼠标悬停于其上的 `button` 元素,并且将其背景颜色设置为红色。
2.2 实例
我们可以使用 `:hover` 选择器来创建一个简单的图像放大特效。当用户将鼠标悬停在一张图片上时,这张图片会放大(改变其 `transform` 属性的值)。
img:hover {
transform: scale(2);
}
这里的选择器会选中鼠标悬停于其上的 `img` 元素,并且将其缩放比例设置为 2。
3. :active
3.1 简介
`:active`选择器可以用来选中元素被激活(按下鼠标按钮、键盘按键等)时的状态,并且能够让我们为这些元素设置特殊的样式。
3.2 实例
我们可以使用 `:active` 选择器来创建一个简单的按钮按下特效。当用户按下一个按钮时,这个按钮会改变其背景颜色。
button:active {
background-color: #ff0000;
}
这里的选择器会选中被激活的 `button` 元素,并且将其背景颜色设置为红色。
4. :focus
4.1 简介
`:focus` 选择器可以用来选中用户输入焦点的元素。这个选择器通常被用来创建表单元素的样式,如下面的例子:
input:focus {
border: 2px solid #ff0000;
}
这个选择器会选中一个获得焦点的 `input` 元素,并且将其边框设置为红色。
4.2 实例
我们可以使用 `:focus` 选择器来创建一个简单的表单元素输入焦点特效。当用户将焦点集中在一个表单元素上时,这个表单元素的背景颜色会改变。
input:focus {
background-color: #e8f0fe;
}
这个选择器会选中获得焦点的 `input` 元素,并且将其背景颜色设置为浅蓝色。
5. :link 和 :visited
5.1 简介
`:link` 和 `:visited` 选择器可以用来选中页面链接的状态。其中 `:link` 用于选中尚未访问过的链接,而 `:visited` 用于选中已访问过的链接。
5.2 实例
我们可以使用 `:link` 和 `:visited` 选择器来创建一个简单的链接样式。
a:link {
color: #007bff;
text-decoration: none;
}
a:visited {
color: #666;
text-decoration: line-through;
}
这里的选择器会选中尚未访问过的链接,并且将其颜色设置为蓝色,将其下划线去除。已访问的链接则会变成灰色,并且添加删除线。
6. 总结
以上介绍了 CSS 用户选择属性中的常用子属性,并且给出了一些实际的应用示例。使用好这些选择器可以为我们的页面增加很多交互效果,提高用户体验。