CSS 专注于一个元素会改变另一个元素的CSS

在本文中，我们将介绍如何使用CSS在一个元素上进行聚焦，并通过这种聚焦来改变另一个元素的CSS样式。

阅读更多：CSS 教程

什么是CSS聚焦？

在CSS中，聚焦是指当用户与网页上的元素进行交互时，特别是当用户点击一个可聚焦的元素时，该元素会获得聚焦状态。聚焦通常用于改变元素的外观和行为。

CSS聚焦选择器

要选择聚焦状态的元素，可以使用CSS的: focus伪类选择器。这个选择器只会匹配当前具有焦点的元素。

例如，我们有一个带有ID为”myInput”的input元素，我们可以使用以下CSS将它的背景颜色改变为蓝色：

#myInput:focus {
  background-color: blue;
}

上面的选择器将在输入框被点击并聚焦时将其背景颜色改为蓝色。

改变其他元素的CSS

使用CSS聚焦，我们可以改变除了正在聚焦的元素之外的其他元素的CSS样式。这可以通过使用CSS中的相邻选择器或兄弟选择器来实现。

相邻选择器

相邻选择器（+）允许我们选择当前元素的下一个兄弟元素。通过将聚焦的元素和需要改变样式的元素组合在一起，我们可以在聚焦时改变其他元素的样式。

让我们看一个例子：

<button>按钮1</button>
<button>按钮2</button>

<style>
button:focus + button {
  background-color: yellow;
}
</style>

上面的代码将在点击并聚焦按钮1时，改变按钮2的背景颜色为黄色。

兄弟选择器

兄弟选择器（~）允许我们选择当前元素后面的所有兄弟元素。通过将聚焦的元素和需要改变样式的元素组合在一起，我们可以在聚焦时改变其他兄弟元素的样式。

让我们看一个例子：

<input type="checkbox" id="checkbox1">
<label for="checkbox1">选项1</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">选项2</label>

<style>
input:focus ~ label {
  color: red;
}
</style>

上面的代码将在点击并聚焦复选框1时，将选项2的文本颜色改为红色。

综合示例

让我们将上面的知识结合起来，创建一个更复杂的示例。我们要在点击标题时展开或折叠相应的内容。

<h1 class="accordion" tabindex="0">标题1</h1>
<div class="content">
  内容1
</div>
<h1 class="accordion" tabindex="0">标题2</h1>
<div class="content">
  内容2
</div>

<style>
.accordion:focus + .content {
  display: block;
}
.accordion + .content {
  display: none;
}
</style>

上面的代码使用了聚焦选择器以及兄弟选择器，当点击标题1时，会展开内容1，而点击标题2时会展开内容2。相应的内容会在失去焦点时折叠起来。