CSS / SCSS-访问具有未知子类型的子元素的子元素

Question

如果我有这样的html，只有一个类应用于根目录。我想访问位于HTML较深处的所有<i>标签。

一些示例html：

<div class="some-class">
  <div> <!-- unknown type - could be span, div or something else -->
    <i></i>
  </div>
</div>

如果i标签是直子，我可以在scss中应用样式，如下所示：

> i {
  color: grey
}

如果我知道第一个孩子始终是div元素，则可以应用以下样式：

> div > i {
  color: grey
}

但是我不知道第一个孩子的类型-可以是任何东西。

在这种情况下，如何正确将样式应用于i标签？

• 如果无法通过动态解决方案进行处理，那么该如何将样式应用于根元素中的所有i标签，而又不对该元素外部的i标签进行样式设置。

Answer 1

指定根元素并仅留一个空格表示后代，所以

.some-class i {
    color: grey;
 }

应该做你想要的。

---

如果仅在样式比根深至少一级时才设置样式，请使用*，这表示任何标记。

 .some-class * i {
    color: grey;
 }

---

最后，如果您想将它们专门定位到第三级，请使用

  .some-class > * > i {
    color: grey;
 }

Answer 2

您尝试过吗：

.some-class i {
//Your styles here
}