為除一個類之外的所有元素創建一個CSS規則？

Question

我有這樣的html：

<div class="portfolio-descr">
    <span class="posted-in"></span>                             
    <h3><a href="">Name</a></h3>           
    Some text <!-- HIDE THIS -->
</div>

我想完全像這樣用CSS隱藏Some text但不隱藏<h3>標簽：

.portfolio-descr:not(h3) {
  display:none;
}

但是所有元素都是隱藏的。

Answer 1

如果使用顯示屬性，它將同時影響父級及其子級，但是您可以使用可見性屬性來實現您的目標。 （我在.posted-in span中添加了一些文本以更好地顯示結果）

 .portfolio-descr{ visibility:hidden; } .portfolio-descr>*{ visibility:visible; } 

 <div class="portfolio-descr"> <span class="posted-in">abc</span> <h3><a href="">Name</a></h3> Some text </div> 

Answer 2

在父類和子代h3之間放置空格，否則將h3視為父類portfolio-descr

.portfolio-descr > :not(h3) {
    display:none;
}

正確的HTML：

根據需要在inline / block html元素中放置some text

<div class="portfolio-descr">
    <span class="posted-in"></span>
    <h3><a href="">Name</a></h3> <span>Some text</span>
  </div>

工作plunker

Answer 3

如果您只想隱藏文本而不隱藏h3和span標簽，則其中一種選擇是使字體顏色和背景相同

檢查此片段

 .portfolio-descr:not(h3):not(span) { color: white; background: white; } 

 <div class="portfolio-descr"> <span class="posted-in"></span> <h3><a href="">Name</a></h3> Some text </div> 

希望能幫助到你