css - 选择子元素 CSS

Question

我在氧气编辑器中使用作者模式，我想为许多 XML 文件创建一个通用 CSS。我希望能够选择给定元素的子元素，而不必事先指定子元素的名称（仅父元素的名称），例如：

<data-collection>
      <data key="transfer-period" id ="1"/> 
      <data key="communication-profile" id="2">
        <wanCommunication></wanCommunication>
      </data>
</data-collection>  

这里我想选择数据元素的 wanCommunication 子元素，而不指定 wanCommunication 元素。

有人知道这是如何在 CSS 中实现的吗？

提前谢谢了！

Answer 1

是的你可以。你有很多方法可以做到这一点。这里有一些：

element:first-child（元素的第一个孩子）

element:last-child （元素的最后一个孩子）

element::nth-child(n) （元素的“n”个子元素）

这些只是少数。您可以在此处查看CSS 选择器的完整列表。

Answer 2

使用:first-child选择器。

data-collection data > :first-child

使用上面的选择器将选择data元素中具有父元素的每个第一个子元素data-collection。

data-collection data > :first-child {
  background-color: #ededed;
}

<data-collection>
      <data key="transfer-period" id ="1"/>
      <data key="communication-profile" id="2">
        <wanCommunication>Hello :)</wanCommunication>
      </data>
</data-collection>