[分享]css3怎么设置第二次点击

CSS3里面提供了很多神奇的效果，其中一个重要的特性就是可以设置第二次点击。接下来，我们将会通过以下的介绍来了解如何使用CSS3设置第二次点击。/设置第一次点击的样式/ button:active {...

CSS3里面提供了很多神奇的效果，其中一个重要的特性就是可以设置第二次点击。接下来，我们将会通过以下的介绍来了解如何使用CSS3设置第二次点击。

/*设置第一次点击的样式*/
	button:active {
		background-color: #ccc;
	}
	/*设置第二次点击的样式*/
	button:focus:active {
		background-color: #f00;
	} 

在代码中，我们可以看到，通过使用伪类选择器:focus来确定是否是第二次点击，从而达到设置不同样式的目的。

上述代码中，我们首先设置了:active这个伪类选择器来表示按钮被激活、被点击的状态下的样式。然后，通过:focus这个伪类选择器来确定是否为第二次点击，并且我们在第二次点击时，设置了不同的样式（即红色背景色）。

通过这样的方式，我们可以轻易地实现第二次点击的样式设置。这也是CSS3的一个很有特色的特性。你可以尝试一下，通过以上代码设置一个简单的按钮，然后测试一下效果吧，我相信你会喜欢的。