覆蓋css屬性

Question

我有2個父div視圖1和2.並且想要隱藏第二個視圖但顯示第二個視圖的描述。

所需的輸出是： 冠軍
樣本說明1
樣的內容描述

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

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

使用: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 2

我沒有privelage發表評論，但你可以使用Java腳本爲poupose。

element.style.visibility = "hidden"; 

Answer 3

更新的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>