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

Question

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

一些示例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在该元素之外设置样式标签。

标签： htmlcsssasscss-selectors

Answer 1

指定根元素并只留下一个空格意味着后代，所以

.some-class i {
    color: grey;
 }

应该做你想做的。

---

如果您只想在它们至少比根深一层的情况下设置它们的样式，则使用*which 表示任何标记。

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

---

最后，如果您想将它们专门针对第三级使用

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