CSS：如何选择 div 的特定通用孙子？答案

【问题标题】：CSS: How do I select a specific universal grandchild of a div?CSS：如何选择 div 的特定通用孙子？
【发布时间】：2014-05-02 05:40:44
【问题描述】：

我正在尝试选择 div 的特定和直接子级的特定和直接子级（我不知道该怎么说）。但是，在这两种情况下，元素都可以是任何东西，所以我需要使用“*”通用符号来选择这些元素。

这可能已经很清楚了，这就是我所拥有的：

.some-div>*:nth-child(2)>*:nth-child(1){
  background-color: #d3fba9;
}
.some-div>*:nth-child(2)>*:nth-child(2){
  background-color: #d3ffe9;
}
.some-div>*:nth-child(2)>*:nth-child(3){
  background-color: #d3fac9;
}

如您所见，我需要选择 div 的第 2 个孩子的第 1-3 个孩子，并将样式应用于它们。可以这样做吗？

【问题讨论】：

是的。 .some-div > :nth-child(2) > :nth-child(1) 作为选择器可以正常工作。这将选择原始 div 的第二个孩子的第一个孩子。星号 * 不是必需的，因为您已经为该特定元素设置了一些说明符。
您对自己的问题已经有了正确答案。这个问题没有更好的答案
如果需要测试一个选择器，可以在jsfiddle.net上构建一个简单的测试用例
It works
我更喜欢我的演示。 :(jsfiddle.net/TC7jk我太慢了。编辑：和更清洁的选择器jsfiddle.net/TC7jk/1

标签： css css-selectors pseudo-class

【解决方案1】：

是的。星号 * 是多余的，因为您已经为该特定元素（.some-div 的子代和孙代）设置了一些说明符。

.some-div > :nth-child(2) > :nth-child(1) - 选择.some-div 的第二个孩子的第一个孩子。
.some-div > :nth-child(2) > :nth-child(2) - 选择 .some-div 的第二个孩子的第二个孩子。
.some-div > :nth-child(2) > :nth-child(3) - 选择 .some-div 的第二个孩子的第三个孩子。

【讨论】：