使用第一个和最后一个孩子

Question

我遵循HTML结构

<div class="conditinal-area">
  <div class="conditions">
    <span class="condition-labels">
        <span class="condition-if">IF</span>
        <span class="condition-elseif">ELSEIF</span>
        <span class="condition-else">ELSE</span>
    </span>
  </div>
  ...
</div>
<div class="conditinal-area">
  <div class="conditions">
    <span class="condition-labels">
        <span class="condition-if">IF</span>
        <span class="condition-elseif">ELSEIF</span>
        <span class="condition-else">ELSE</span>
    </span>
  </div>
  ...
</div>
<div class="conditinal-area">
  <div class="conditions">
    <span class="condition-labels">
        <span class="condition-if">IF</span>
        <span class="condition-elseif">ELSEIF</span>
        <span class="condition-else">ELSE</span>
    </span>
  </div>
  ...
</div>

现在我喜欢用CSS隐藏所有 IF ， ELSEIF ， ELSE 并显示：

IF .conditional-area <{strong> .conditional-area 上的
• ELSE 其他 .conditional-area
上的
• ELSEIF

此will work包含以下CSS：

.condition-labels span{
    display:none;
}
.conditinal-area:first-child .condition-labels span:first-child{
    display:inline;
}
.conditinal-area .condition-labels span.condition-elseif{
    display:inline;
}
.conditinal-area:first-child .condition-labels span.condition-elseif{
    display:none;
}
.conditinal-area:last-child .condition-labels span:last-child{
    display:inline;
}
.conditinal-area:last-child .condition-labels span.condition-elseif{
    display:none;
}

BUT

在HTML之前或之后添加内容会导致隐藏 IF 和 ELSE ：jsFiddle

Answer 1

对不起，但是在元素之前和之后添加随机内容会搞乱孩子们的引用，并且没有办法解决它。没有n-of-class这样的东西。

如果您需要在这些元素之前/之后放置内容，我建议您将它们包装在div中，这样您就可以保持子对象的完整性。

Updated JsFiddle

<div>content before</div>
<div> <!-- WRAPPER DIV -->
    <div class="conditinal-area">
        <div class="conditions">
            <span class="condition-labels">
                <span class="condition-if">IF</span>
                <span class="condition-elseif">ELSEIF</span>
                <span class="condition-else">ELSE</span>
            </span>
        </div>
        1
    </div>
    <div class="conditinal-area">
        <div class="conditions">
            <span class="condition-labels">
                <span class="condition-if">IF</span>
                <span class="condition-elseif">ELSEIF</span>
                <span class="condition-else">ELSE</span>
            </span>
        </div>
        2
    </div>
    <div class="conditinal-area">
        <div class="conditions">
            <span class="condition-labels">
                <span class="condition-if">IF</span>
                <span class="condition-elseif">ELSEIF</span>
                <span class="condition-else">ELSE</span>
            </span>
        </div>
        3
    </div>
    <div class="conditinal-area">
        <div class="conditions">
            <span class="condition-labels">
                <span class="condition-if">IF</span>
                <span class="condition-elseif">ELSEIF</span>
                <span class="condition-else">ELSE</span>
            </span>
        </div>
        4
    </div>
</div>
<div>content after</div>

Answer 2

我将“之前的内容”和“之后的内容”更改为<p>标记，因此我们可以正确使用nth-of-type()选择器。您也可以将所有条件div包装到容器中。

http://jsfiddle.net/g2Ljqf6j/

.conditinal-area:not(:first-of-type) .condition-if,
.conditinal-area:not(:last-of-type) .condition-else,
.conditinal-area:first-of-type .condition-elseif,
.conditinal-area:last-of-type .condition-elseif {
    display: none;
}

<p>content before</p>

<div class="conditinal-area">
  <div class="conditions">
    <span class="condition-labels">
        <span class="condition-if">IF</span>
        <span class="condition-elseif">ELSEIF</span>
        <span class="condition-else">ELSE</span>
    </span>
  </div>
    1
</div>
<div class="conditinal-area">
  <div class="conditions">
    <span class="condition-labels">
        <span class="condition-if">IF</span>
        <span class="condition-elseif">ELSEIF</span>
        <span class="condition-else">ELSE</span>
    </span>
  </div>
    2
</div>
<div class="conditinal-area">
  <div class="conditions">
    <span class="condition-labels">
        <span class="condition-if">IF</span>
        <span class="condition-elseif">ELSEIF</span>
        <span class="condition-else">ELSE</span>
    </span>
  </div>
    3
</div>
<div class="conditinal-area">
  <div class="conditions">
    <span class="condition-labels">
        <span class="condition-if">IF</span>
        <span class="condition-elseif">ELSEIF</span>
        <span class="condition-else">ELSE</span>
    </span>
  </div>
    4
</div>

<p>content after</p>

Answer 3

您可以使用first-of-type和last-of-type。

.condition-labels span{
  display:none;
}
.conditinal-area:first-of-type .condition-labels span:first-of-type{
  display:inline;
}
.conditinal-area .condition-labels span.condition-elseif{
  display:inline;
}
.conditinal-area:first-of-type .condition-labels span.condition-elseif{
  display:none;
}
.conditinal-area:last-of-type .condition-labels span:last-of-type{
  display:inline;
}
.conditinal-area:last-of-type .condition-labels span.condition-elseif{
  display:none;
}