求助：input:focus触发search-backdrop显示失败，CSS选择器问题排查

核心问题：选择器未匹配正确的DOM关系 #

你卡壳的本质是没搞清楚#Search-In-Modal-1和.search-backdrop的层级/兄弟关系，以及+、>、~这三个选择器符号的差异：

• >：直接子元素选择器，仅匹配父元素下的第一层子节点，比如parent > child只选parent直接包裹的child。
• +：相邻兄弟选择器，仅匹配目标元素紧接在后的第一个同级元素，比如elem1 + elem2只选elem1后面挨着的elem2。
• ~：通用兄弟选择器，匹配目标元素之后的所有同级元素，不管是否紧接。

为什么复制的开发者工具选择器无效？ #

开发者工具复制的是绝对路径选择器（比如body > div.modal-container > #Search-In-Modal-1），但Shopify主题渲染时可能会动态添加嵌套容器，或者.search-backdrop和搜索框的DOM关系和绝对路径不符，导致选择器失效。

结合Shopify常见结构的解决方案 #

假设你的搜索模态DOM结构属于以下几种常见情况，对应不同的写法：

情况1：.search-backdrop是搜索框的紧接同级兄弟

结构示例：

<div class="search-modal">
  <input type="text" id="Search-In-Modal-1" />
  <div class="search-backdrop" style="display: none;"></div>
</div>

用+选择器：

#Search-In-Modal-1:focus + .search-backdrop {
  display: block;
}

情况2：.search-backdrop是搜索框的非紧接同级兄弟

结构示例：

<div class="search-modal">
  <input type="text" id="Search-In-Modal-1" />
  <div class="search-icon"></div>
  <div class="search-backdrop" style="display: none;"></div>
</div>

用~选择器：

#Search-In-Modal-1:focus ~ .search-backdrop {
  display: block;
}

情况3：搜索框和 backdrop 分属同一父元素的不同子容器

结构示例：

<div class="search-modal">
  <div class="input-wrapper">
    <input type="text" id="Search-In-Modal-1" />
  </div>
  <div class="search-backdrop" style="display: none;"></div>
</div>

这种情况无法用纯子/兄弟选择器，可借助:has()选择器（注意兼容性，现代浏览器支持）：

.search-modal:has(#Search-In-Modal-1:focus) .search-backdrop {
  display: block;
}

如果需要兼容旧浏览器，用简单JS辅助：

const searchInput = document.getElementById('Search-In-Modal-1');
const backdrop = document.querySelector('.search-backdrop');

searchInput.addEventListener('focus', () => backdrop.style.display = 'block');
searchInput.addEventListener('blur', () => backdrop.style.display = 'none');

验证步骤 #

1. 打开浏览器开发者工具，选中#Search-In-Modal-1，查看它和.search-backdrop的DOM层级关系。
2. 根据关系选择对应选择器测试，可临时加!important确认是否生效（生效后去掉，避免样式冲突）。

内容的提问来源于stack exchange，提问作者RudyAware