因此，我有以下html和CSS。
<div class="parent">
<div class="a"> A </div>
<div class="b"> B </div>
<div class="c"> C </div>
<div class="d"> D </div>
<div class="e"> E </div>
<div class="F"> F </div>
</div>
<style>
.parent .a{display:none;}
.parent .b{display:none;}
.parent .c{display:none;}
.parent .d{display:none;}
.parent .e{display:none;}
</style>
在这种情况下，如何简化CSS，而不必重复相同的代码5次？
编辑：我应该更清楚。并非所有元素都被隐藏。只有一部分类别隐藏在“父”中（不隐藏“ class =“ f”）
谢谢
您有几种选择。
就像@Akshay评论的那样，您可以执行以下操作：
.parent div {
display: none;
}
div里面的每一个都会得到display: none;
您还可以执行以下操作：
.parent >div {
display: none;
}
而且只会瞄准第一级divs。
您也可以添加特定的类来隐藏元素。
例如 ： hidden
.parent .hidden {
display: none;
}
和HTML：
<div class="parent">
<div class="a hidden"> A </div>
<div class="b hidden"> B </div>
<div class="c hidden"> C </div>
<div class="d hidden"> D </div>
<div class="e hidden"> E </div>
<div class="F"> F </div>
</div>
这样，F仍然会显示，而其他所有的都将被隐藏。
如果你想父的所有内容将被隐藏，你也可以给parent的display: none。像这样的：
.parent {
display: none;
}
这样，父母和所有孩子都被隐藏了。
还有很多选择..但是这些只是一些例子。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句