css 焦点在元素本身或者按钮上的时候显示否则隐藏

CSS的`:focus`伪类选择器可以用来选取获得焦点的元素，并为其应用特定的样式。当你希望一个元素或按钮在获得焦点时显示某些样式，而失去焦点时则隐藏这些样式，可以结合使用`:focus`和`:not(:focus)`选择器来实现。

例如，如果你想要一个输入框，在它获得焦点时显示边框颜色，而失去焦点时隐藏边框，可以这样写：

input {
  border: 1px solid transparent; /* 默认情况下边框颜色为透明 */
}

input:focus {
  border: 1px solid #000; /* 获得焦点时显示黑色边框 */
}

这样，当输入框获得焦点时，会显示黑色边框；失去焦点时，边框颜色将变为透明，从而实现“显示”和“隐藏”的效果。

如果你想针对按钮实现类似的样式变化，也可以使用相同的方法：

button {
  background-color: #f0f0f0; /* 默认按钮背景颜色 */
  color: #333; /* 默认按钮文字颜色 */
}

button:focus {
  background-color: #007bff; /* 获得焦点时背景颜色变为蓝色 */
  color: #fff; /* 文字颜色变为白色 */
}