Question

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

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

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

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

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

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

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

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

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当该元素也满足其他两个条件时，以下选择器将仅选择其父元素的 第一个子 元素 - 即元素类型为folder和class不是test。

folder:not(.test):first-child

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

Answer 2

巴拉特，

CSS是声明性的而非程序性的，那么你就无法结合＆＃34;而不是＆＃34;和＃34;第一个孩子＆＃34; （或＆＃34; nth-of-type＆＃34;）。更多信息： Combining :nth-of-type() and :not

但你可以很容易地使用代字号＆＃34;〜＆＃34; https://www.w3.org/TR/selectors/#general-sibling-combinators

一般兄弟组合器由＆＃34; tilde＆＃34; （U + 007E，〜）分隔两个简单选择器序列的字符。该由两个序列表示的元素共享同一个父元素文档树和第一个序列表示的元素先于（不一定是立即）由...表示的元素第二个。

你应该尝试：

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

球

选择不带选择器的元素后选择第一个子元素

2 个答案: