CSS 中的阿姨/叔叔选择器？ [关闭]

Question

我目前有这个 html 布局

如何根据输入 [type="radio"] 选择“MenuDisplayFocus”div 中的 img，例如，当我检查第一个输入时，我只能选择第一张图像？

我试图在互联网上查找此类问题，但大多数将 imgs 设置为输入的子项或与其直接相邻，是否没有像我描述的那样选择的方法？

Answer 1

对于你的情况，你可以这样做，但你需要

:has()

伪类并且有一个问题。

我们可以使用 :has() 来选择父级，所以在这种情况下，我们正在查看 #menu div 并测试第一个输入框。因为第一个输入框实际上是#menu div 的第二个子元素（第一个子元素是 id 为 MenuFocus 的 div），所以我们必须使用 nth-child(2) 来选择第一个输入框。我们不能将 nth-child 选择器与其他规则结合起来以“过滤”不需要的项目（有关详细信息，请参阅 this stackoverflow 上的答案），

如果选中此项，那么我们可以使用后代组合器选择第一张图像。

请注意，目前并非所有浏览器都支持 :has()。您可以在 caniuse.com 上查看

可以找到关于 :has() 的很好的入门书css-tricks，这里有一个很好的video由凯文·鲍威尔（Kevin Powell）制作。

附言如果您发布实际代码而不是屏幕截图，对于其他贡献者来说会容易得多。它可以帮助您更快地获得答案并避免您的问题被关闭。

#menu:has(input[type="checkbox"]:nth-child(2):checked) #MenuDisplayFocus img:first-child {
  outline: 2px solid red;
}

<div id='menu'>
  <div id='MenuInfo'>
    <div id='MenuDisplayFocus'>
      <img src='https://placekitten.com/200/200'>
      <img src='https://placekitten.com/g/200/200'>
    </div>
    <input type='checkbox' id='SoccerFields' checked='checked'>
    <div id='SoccerfieldsDescription' class='Description'>XXX</div>
    <input type='checkbox' id='Employees'>
    <div id='EmployeesDescription' class='Description'>YYY</div>
  </div>
</div>