Question

我一直试图通过CSS访问一个元素而不明白为什么。

我有一个随机数的<label><div>组合，如下所示：

<div class="sample">
   <label></label>
   <div class="ui-random-foo"></div>
   <label></label>
   <div class="ui-random-bar"></div>
   <label></label>
   <div class="ui-random-baz"></div>
</div>

我不知道我会得到多少个元素对，并且想要根据元素的数量来设置宽度。然而，当我的选择器：

.sample label ~ div

在上面的示例中运行并返回所有三个<div>，执行：

.sample label ~ div:first-child

不起作用。

问题
为什么我不能使用第一个孩子？我曾希望我的兄弟选择器会返回一组div个元素，所以我在同源元素上使用了第一个孩子？或者还有其他问题吗？

Answer 1

第一个孩子是标签元素。第一个div是第二个孩子。

您可以使用：

.sample label:first-child + div

Answer 2

您可以使用：

.sample div:first-of-type

选择第一个div。

示例：

.sample *{
    height:10px;
    display:block;
    margin-top:5px;
    background:teal;
}
.sample div:first-of-type{
    background:gold;
}

<div class="sample">
   <label></label>
   <div class="ui-random-foo"></div>
   <label></label>
   <div class="ui-random-bar"></div>
   <label></label>
   <div class="ui-random-baz"></div>
</div>

Answer 3

好的，找到了另一种最符合我需求的解决方案：

.sample :first-child:nth-last-child(2) ~ div {
   width: 60%;
}
.sample  :first-child:nth-last-child(4) ~ div {
   width: 30%;
}
.sample :first-child:nth-last-child(6) ~ div {
   width: 20%;
}
.sample :first-child:nth-last-child(8) ~ div  {
  width: 15%;
}

所以我没有过滤任何东西，因为我知道总会有成对的元素，所以我要检查2,4,6,8个元素并分别设置兄弟div的宽度。似乎工作。感谢@Huangism的想法。

为什么我不能在同类元素列表中使用sibling和：first-child？

3 个答案: