递归定位和修改特定类型的第一个元素的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

关于：

.container .photoWrapper:first-child img {
  display:none;
}

Answer 2

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

因此，如果我没有误解您的问题，那么您要完成的工作就是使用img选择器在.container类中找到第一个:first-of-type。如果我们基于您元素的结构，那将永远不会发生。这是因为您使用的是“>”选择器，但内部没有img的直接后代，因为图像被包装在.photoWrapper类中。如果使用div img:first-of-type，它将选择div内及其后继图像的所有第一个图像实例。

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

嗯，我不知道您是否喜欢这个，但这是我为您解决的问题。我将使用jquery的find('img:first')函数。

希望这会对您有所帮助。

$(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>