Question

我试图从一个组中选择第一个项目，但是我想按类别从选择中排除某些项目。

e.g。在此示例中，我尝试选择没有.item类的第一个.hide。 not()正常工作，正确选择除第一项以外的所有项目，但first-of-type之后似乎无法匹配任何内容。

为了澄清，在这个例子中，我的目标是：

第一项应保持红色
第二项（第一项.item没有.hide类）应为蓝色
第3项：绿色
第4项：绿色
第五项：红色
第6项：绿色

＆＃13;

.item {
  background-color: #060;
  margin-bottom: 2px;
  text-align: center;
  color: #FFF;
}
.hide {
  background-color: #600;
}
/* The important bit */
.item:not(.hide):first-of-type {
  background-color: #006;
}

＆＃13;

<div class="item hide">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item hide">5</div>
<div class="item">6</div>

＆＃13;

我是否错误地编写了选择器？有没有其他方法可以做到这一点？

Answer 1

由于您的所有商品都是div，如果他们是父母中唯一的子女，则:first-of-type相当于:first-child。有关详细信息，请参阅this answer。

由于you can't directly match the first child with a class（或任何其他子选择器），您需要使用覆盖规则以另一种方式执行此操作。

最简单的方法是：

将所有项目设为蓝色。
将.hide个项目设为红色（按预期方式）。
将绿色样式应用于.item:not(.hide) ~ .item:not(.hide)。也就是all items that don't have the .hide class, that follow the first such item。

这解释了只有一个假设的所有可能情况：如果第一个元素没有.hide类，那么它也应该是蓝色的：

＆＃13;

.item {
  background-color: #006;
  margin-bottom: 2px;
  text-align: center;
  color: #FFF;
}
.hide {
  background-color: #600;
}
.item:not(.hide) ~ .item:not(.hide) {
  background-color: #060;
}
section {
  float: left;
  width: 20%;
  margin: 20px;
}

＆＃13;

<section>
    <div class="item hide">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item hide">5</div>
    <div class="item">6</div>
</section>
<section>
    <div class="item hide">1</div>
    <div class="item hide">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item hide">5</div>
    <div class="item">6</div>
</section>
<section>
    <div class="item">1</div>
    <div class="item hide">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item hide">5</div>
    <div class="item">6</div>
</section>

＆＃13;

如果第一个元素可能缺少.hide类，但您只希望<{1}} 之后的.item:not(.hide) 项为蓝色，那么它就变为蓝色没有JavaScript就不可能。

Answer 2

代码

此代码具有所需的效果：

＆＃13;

daten           count of vacations
-------         ---------------------
2016-01-01      1
2016-01-02      1
2016-01-04      1
2016-01-05      2
2016-01-06      2
2016-01-07      3
2016-01-08      3
2016-01-09      3
2016-01-10      4
2016-01-11      4
2016-01-12      4

＆＃13;

.item {
    background-color: #006;
    margin-bottom: 2px;
    text-align: center;
    color: #FFF;
}

.hide {
    background-color: #600;
}

.item:not(.hide) ~ .item:not(.hide) {
    background-color: #060;
}

＆＃13;

（另见this Fiddle）

使用not（）选择器

2 个答案:

代码