在网站开发中，经常会遇到点击按钮更新页面内容的情况。通常情况下，我们的实现方式是使用 JavaScript。

// 获取按钮元素
const btn = document.querySelector('.btn');
// 获取要更新的元素
const content = document.querySelector('.content');
// 绑定点击事件
btn.addEventListener('click', function() {
// 更新内容
content.innerHTML = '更新后的内容';
});

然而，在一些情况下，我们需要实现点击按钮更新 CSS 样式，同时更新页面内容。这时候，我们可以使用 CSS 和 JavaScript 相互搭配来实现。

/* CSS */
/* 设置按钮样式 */
.btn {
padding: 10px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
}
/* 设置要更新的内容的样式 */
.content {
font-size: 16px;
color: #007bff;
}
/* 设置点击后的样式 */
.btn:active + .content {
font-size: 20px;
color: #ff6a00;
}

// JavaScript
// 获取按钮元素
const btn = document.querySelector('.btn');
// 获取要更新的元素
const content = document.querySelector('.content');
// 绑定点击事件
btn.addEventListener('click', function() {
// 更新内容
content.innerHTML = '更新后的内容';
});

在 CSS 中，我们通过设置按钮的:active伪类和相邻兄弟选择器来实现点击后的样式。当按钮被点击时，会触发:active伪类，同时相邻兄弟选择器会选择相邻的.content元素。

在 JavaScript 中，我们只需要更新.content元素的内容就可以了。

通过这种方式，我们就可以实现点击按钮同时更新样式和内容的效果。