选择子元素CSS

Question

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

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

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

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

首先要感谢大家！

Answer 1

可以，停那儿吧。你有很多方法可以做到这一点。下面是一些例子：

元素:第一个孩子(元素的第一个孩子)

元素:最后一个孩子(元素的最后一个孩子)

元素：：n- child (N)(元素的'n‘子元素)

这些只是其中的一小部分。您可以查看CSS选择器here的完整列表。

Answer 2

使用:first-child选择器。

data-collection data > :first-child

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

​

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>

​