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

据我所知，“第一种类型”选择器仅在兄弟级别工作，但由于种种原因，我只能在“容器”级别操作-那么有没有一种方法可以从曾祖父级别的样式中递归选择图像的第一个实例呢？

关于：

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

根据我自己的理解，“>”选择器选择元素的第一个子元素。与例如

div>img

类似，此选项选择div的第一个后代的所有

img

，而不是第二个后代的

img

因此，如果我没有误解您的问题，您试图完成的是使用

：first of type

选择器在

.container

类中找到第一个

img

。如果我们以你们元素的结构为基础，它将永远不会发生。这是因为您正在使用“>”选择器，但内部没有

img

的直接后代，因为图像被包装在

.photoWrapper

类中。如果您使用

div img:first of type

，这将选择

div

中的所有图像的第一个实例及其后续实例

遗憾的是，我认为CSS上仍然没有能够根据您的问题找到所有后续元素的特性/选择器。您可以在此处阅读有关选择器的信息： /

嗯，我不知道你是否喜欢这个，但这是我解决你问题的方法。我将使用jquery的

find（'img:first'）

函数

希望这对你有帮助

$（文档）.ready（函数（）{
$（'.container'）.find（'img:first'）.hide（）；
});

...
从你的例子中我立刻想到的问题是，是否总是假设在那个确切的位置会有一个图像标签？也就是说，为什么它存在与否很重要，没有理由“搜索”它；如果存在，则应用规则；如果不存在，则不应用规则。例如：
.container.photoWrapper:first of type>img{}
“那么，有没有一种方法可以从曾祖父级别的样式中递归选择图像的第一个实例？”-没有。正如下面的回答中提到的，JS是您唯一的选择。
.container .photoWrapper:first-child img {
  display:none;
}