css控制点击button后样式改变，且在点击别处，样式依然为改变后的样式

要实现点击按钮后样式的改变，并在点击别处后继续保持改变后的样式，可以使用JavaScript来控制CSS样式的变化。以下是一个示例：

HTML代码：

<button id="myButton">点击我</button>
<div id="otherArea">点击别处</div>

CSS代码：

.bold {
  font-weight: bold; /* 样式改变后的样式 */
}

JavaScript代码：

const button = document.getElementById("myButton");
const otherArea = document.getElementById("otherArea");

button.addEventListener("click", function() {
  button.classList.add("bold"); // 添加CSS类名，应用样式改变
});

document.addEventListener("click", function(event) {
  if (event.target !== button && event.target !== otherArea) {
    button.classList.remove("bold"); // 移除CSS类名，恢复原样式
  }
});

在这个示例中，我们使用JavaScript来监听按钮的点击事件。当按钮被点击时，我们向按钮添加了一个名为"bold"的CSS类名，从而应用样式改变。然后，我们监听整个文档的点击事件，当点击的目标不是按钮和其他区域时，我们从按钮中移除"bold"类名，以恢复原样式。

这样，无论点击按钮后点击别处，样式都会保持为改变后的样式。请注意，您需要将JavaScript代码放置在适当的位置，例如在页面加载完成后执行或放置在外部的JavaScript文件中。