CSS 用户选择属性

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 用户选择属性中的常用子属性,并且给出了一些实际的应用示例。使用好这些选择器可以为我们的页面增加很多交互效果,提高用户体验。