Question

我有2个父div视图1和2.并且想要隐藏第二个视图但显示第二个视图的描述。

期望的输出是：的标题
样品说明1 样本说明2

＆＃13;

.view2{
  display:none;
}
.view2 .desc{
  display:block !important;
}

＆＃13;

<div class="view1">
  <div class="title">
  <p>Hello</p>
  </div>
  <div class="desc"> sample description1</div>
</div>
<div class="view2">
  <div class="title">
  <p>Hello</p>
  </div>
  <div class="desc"> sample description2</div>
</div>

＆＃13;

Answer 1

更新Css

.view2 .title{
  display:none;
}

下面的代码段示例

.view2 .title{
  display:none;
}

<div class="view1">
  <div class="title">
  <p>Hello</p>
  </div>
  <div class="desc"> sample description1</div>
</div>
<div class="view2">
  <div class="title">
  <p>Hello</p>
  </div>
  <div class="desc"> sample description2</div>
</div>

Answer 2

使用:not()选择器。

试试这个

.view2 *:not(.desc) {
  display: none;
}

<div class="view1">
  <div class="title">
  <p>Hello</p>
  </div>
  <div class="desc"> sample description1</div>
</div>
<div class="view2">
  <div class="title">
  <p>Hello</p>
  </div>
  <div class="desc"> sample description2</div>
</div>

Answer 3

我没有评论，但你可以使用java脚本。

element.style.visibility = "hidden";

覆盖css属性

3 个答案: