css - 递归定位和修改特定类型的第一个元素的CSS

Question

我有一个这样定义的 html 结构:

<div class="container">
  <div class=photoItems>
    <div class=photoWrapper>
      <img class="image" ... />
    </div>
    <div class=photoWrapper>
      <img class="image" ... />
    </div>
    <div class=photoWrapper>
      <img class="image" ... />
    </div>
    ...
  </div>
</div>

我希望能够做的是使用“容器”样式递归地遍历其子项并找到类型的第一个实例 <img/>并强制display:none; .有点像这样(非工作 css):

.container {
  width: 100%;

  > img:first-of-type {
    display: none;
  }
}

据我了解，“首类型”选择器仅适用于同级级别，但由于某些原因我只能在“容器”级别运行 - 所以有没有一种方法可以递归选择第一个实例曾祖父级别的造型图像？

Answer 1

根据我自己的理解，“>”选择器选择元素的第一个后代元素。例如div > img , 这个选择了所有的 img是 div 的第一个后代，而不是 img这是它的第二个继任者。

所以，如果我没有误解你的问题，你想要完成的是找到第一个 img在.container里面使用 :first-of-type 上课选择器。如果我们基于你的元素的结构，它永远不会发生。这是因为您使用的是“>”选择器，但没有 img 的直接后代。里面，因为图像被包裹在里面 .photoWrapper类(class)。如果你使用 div img:first-of-type , 这将选择 div 中所有图像的第一个实例以及它的继任者。

可悲的是，我认为 CSS 上仍然没有功能/选择器可以根据您的问题找到其所有后继者的元素。您可以在此处阅读有关选择器的信息: https://www.w3schools.com/cssref/css_selectors.asp/ https://www.w3schools.com/cssref/css_selectors.asp

嗯，我不知道你是否喜欢这个，但这是我解决你问题的方法。我会用find('img:first') jquery的功能。

希望对您有所帮助。

$(document).ready(function(){
   $('.container').find('img:first').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class=photoItems>
    <div class=photoWrapper>
      <img class="image" alt="1" />
    </div>
    <div class=photoWrapper>
      <img class="image" alt="2"  />
    </div>
    <div class=photoWrapper>
      <img class="image" alt="3"  />
    </div>
    ...
  </div>
</div>