在选择没有选择器的元素后选择第一个孩子答案

【问题标题】：Selecting first-child after selecting element with not selector在选择没有选择器的元素后选择第一个孩子
【发布时间】：2017-02-17 11:33:46
【问题描述】：

我面临一个问题。在其中我想选择所有没有类'test'的文件夹元素，然后我想跳过第一个孩子（在所有没有类测试的元素的结果中）。我创建了一个小提琴Fiddle link

我正在尝试为所有没有测试类且它也不是第一个子元素的文件夹元素设置背景颜色。

所以我首先尝试为所有没有测试类的元素设置背景颜色。

folder:not(.test) {
  background-color:yellow;
}

然后我添加了这个 CSS 来跳过没有测试类的第一个子元素的背景颜色。

folder:not(.test):first-child{
  background-color:initial;
}

但这不起作用！！！。在小提琴中，只有最后 3 行的背景颜色应为黄色。但目前第 4 行也有黄色背景。任何帮助将不胜感激。

注意：我正在寻找仅 CSS 的解决方案。

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

为此目的使用通用同级选择器 (~)。此选择器将选择所有不具有 class='test' 并且至少具有相同类型的先前兄弟的所有 folder 元素。由于它需要至少有一个先前的兄弟姐妹folder:not(.test)，因此不会选择第一个没有class='test' 的folder 元素。

folder:not(.test) ~ folder:not(.test) {
  background-color: yellow;
}

folder:not(.test) ~ folder:not(.test) {
  background-color: yellow;
}

<folder class="test">
  1.)This is test folder
</folder><br>
<folder class="test">
  2.)this is test folder
</folder><br>
<folder class="test">
  3.)this is test folder
</folder><br>
<folder>
  4.)first:level: this is not test folder
</folder><br>
<folder>
  5.)This is not test folder
</folder><br>
<folder>
  6.)This is not test folder
</folder><br>
<folder>
  7.)This is not test folder
</folder><br>

当元素同时满足其他两个条件，即元素类型为folder 和 class 不是 test。

folder:not(.test):first-child

在您的代码中，第一个子元素（这里的所有元素都是 body 的子元素，因为没有其他容器标记）是具有 class='test' 的元素，因此上面的选择器不匹配任何元素。

【讨论】：

哈利听起来很棒！我对css3有点陌生。 Bdw 我编辑了小提琴，现在文本进入
标签。我还操纵了CSS。但这行不通。这是我更新的小提琴link
@BharatSewani：就像here 一样使用folder:not(.test) ~ folder:not(.test) p。当您这样做时，您将选择 p 元素，它是 folder:not(.test) 元素的子元素，该元素具有相同类型的先前兄弟。但是当你执行folder:not(.test) p ~ folder:not(.test) p 时，它会尝试选择p 元素，它是folder:not(.test) 的子元素，而folder:not(.test) 又是p 元素的兄弟元素（参见选择器中的顺序）。我们的folder 不是任何p 的兄弟，因此您的小提琴中没有任何元素着色。
谢谢大佬！！！但是当我不得不跳过前两个或更多元素时，我有点担心。这可能吗？
@BharatSewani：你不能一直改变问题。我认为您的原始问题已得到解答，因此您应该通过单击空心刻度线将答案标记为“已接受”，如果您有新问题，请提出单独的问题。

【解决方案2】：

巴拉特，

CSS 是声明性和非程序性的，因此您不能将“not”和“first-child”（或“nth-of-type”）结合使用。更多信息在这里： Combining :nth-of-type() and :not

但是你可以很容易地使用波浪号“~” https://www.w3.org/TR/selectors/#general-sibling-combinators

一般的兄弟组合子由“波浪号”（U+007E，~）组成分隔两个简单选择器序列的字符。这由两个序列表示的元素在文档树和第一个序列表示的元素在（不一定立即）由第二个。

你应该试试：

folder:not(.test) ~ folder:not(.test) {
  background-color: yellow;
}

宝珠

【讨论】：