Html 隐藏具有第一个子元素和最后一个子元素的某些跨度元素

我有以下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>

但是

---

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

您可以使用

类型的第一个
和
类型的最后一个

.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;
}

很抱歉，在元素之前和之后添加随机内容会打乱子元素的引用，这是无法避免的。没有所谓的
n-of-class

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


之前的内容
如果
埃尔塞夫
其他的
1.
如果
埃尔塞夫
其他的
2.
如果
埃尔塞夫
其他的
3.
如果
埃尔塞夫
其他的
4.
满足于
我将“content before”和“content after”更改为
标记，这样我们就可以正确地使用
nth-of-type（）
选择器。您还可以将所有条件div包装到一个容器中



。条件区域：非（：类型的第一个）。条件如果，
.条件区域：非（：类型的最后一个）。条件其他，
.条件区：类型的第一个条件区，
.conditional区域：类型的最后一个.condition elseif{
显示：无；
}
之前的内容

如果
埃尔塞夫
其他的
1.
如果
埃尔塞夫
其他的
2.
如果
埃尔塞夫
其他的
3.
如果
埃尔塞夫
其他的
4.
之后的内容相同的结果：
类型的第n个
按类型选择，而不是按类选择。因为所有元素都是div
s，所以它没有用。我就是这样做的！
.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;
}

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