CSS可以用来控制页面元素的交互效果，包括hover、active和focus状态。这些状态可以用来增强用户与页面之间的交互体验。以下是一些使用CSS控制页面元素交互效果的方法：
Hover状态是当鼠标悬停在一个元素上时触发的状态。可以使用:hover伪类选择器来设置元素的hover状态样式。例如：
.btn:hover {
background-color: yellow;
}
上面的代码将设置一个按钮元素的背景颜色为黄色，当鼠标悬停在该按钮上时。
Active状态是当用户点击一个元素并按住鼠标时触发的状态。可以使用:active伪类选择器来设置元素的active状态样式。例如：
.btn:active {
background-color: green;
}
上面的代码将设置一个按钮元素的背景颜色为绿色，当用户点击并按住该按钮时。
Focus状态是当用户在一个元素上时触发的状态，例如在一个表单元素上输入文本时。可以使用:focus伪类选择器来设置元素的focus状态样式。例如：
input:focus {
border: 2px solid blue;
}
上面的代码将设置一个输入框元素的边框颜色为蓝色，当用户在该输入框上输入文本时。
除了以上三种状态，CSS还支持其他伪类选择器，例如:first-child、:last-child、:nth-child等，可以用来选择特定的元素并设置其样式。在设计交互效果时，可以灵活使用这些伪类选择器，以达到更好的用户体验。