Question

我想在.condition中隐藏一些像.operator，.value，.disabled这样的元素，所以我写css为

.disabled .condition, .disabled .operator, .disabled .value {display:none}

但我的孩子名单非常大，因此那里有很多重复的.disabled。有什么办法可以避免吗？可能就像

.disabled [.condition, .operator, .value] {display:none}

Answer 1

如果.disabled位于家长，您可以使用Child Selector .disabled > .content1, .content2, .content3

div {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 1px;
  text-align: center;
  line-height: 50px;
}

.disabled>.content1,.content2,.content3 {
  display: none;
}

<div class="disabled">
  <div class=" content1 ">1</div>
  <div class=" content2 ">2</div>
  <div class=" content3 ">3</div>
  <div class=" content4">4</div>
  <div class=" content5">5</div>
  <div class=" content6">6</div>
</div>

在成瘾中，可以查看CSS Selector Reference以获取其他选择器的完整列表。

Answer 2

您可以将HTML标记用于更多＆＃34;常规选择＆＃34;，例如：

 .disabled > span {
    display: none;
 }

如果您有比隐藏元素更多的隐藏元素，您可以尝试类似：

 .disabled > span:not(.some):not(.visible):not(.elements) {
    display: none;
 }

你也可以在你的html中添加一个隐藏的类到你要隐藏的所有元素。

 .hidden {
    display: none;
 }

Answer 3

试试这个：

.disabled .condition, .disabled .operator, .disabled .value {visibility: none;}

Answer 4

使用LESS或SASS，您可以执行以下操作：

    .disabled {
        .condition, .operator, .class2 {
            display: none;
        }
    }

http://www.hongkiat.com/blog/less-basic/

与多个孩子的风格相同

4 个答案: