我正在尝试创建一个搜索菜单。当我点击输入搜索框
时，会显示搜索历史当我使用class:focus ~ .class2时，它们工作吗?请告诉我我们是怎么工作的
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.header__search-input:focus .header__search-input-history {
display: block;
}
.header__search-input-history {
display: none;
}
</style>
</head>
<body>
<div class="header__search-input-wrap">
<input type="text" class="header__search-input" placeholder="Search">
<div class="header__search-input-history">
<h3 class="header__search-input-history-title">History Search</h3>
<ul class="header__search-input-history-list">
<li class="header__search-input-history-item">
<a class="header__search-input-history-link" href="">History Item</a>
</li>
<li class="header__search-input-history-item">
<a class="header__search-input-history-link" href="">History Item</a> </li>
</ul>
</div>
</div>
</body>
</html>
添加以下css。这使用了+ sibling选择器
.header__search-input-history{
display: none;
}
.header__search-input:focus + .header__search-input-history
{
display: block;
}
示例:https://codepen.io/jriches/pen/QWveZqW