时间戳

首页 > 解决方案 > 递归定位和修改特定类型的第一个元素的 css

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

问题描述

我有一个这样定义的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/>并强制 a display:none;. 有点像这样（非工作CSS）：

.container {
  width: 100%;

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

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

标签： csscss-selectors

解决方案

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

所以，如果我没有误解你的问题，你想要完成的是使用选择器img在类中找到第一个。如果我们基于您元素的结构，它永远不会发生。这是因为您使用的是 ">" 选择器，但由于图像被包装在类中，因此内部没有直接后代。如果你使用，这将选择 image 中的所有第一个实例以及它的后继者。.container:first-of-typeimg.photoWrapperdiv img:first-of-typediv

可悲的是，我认为 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>

推荐阅读