CSS - 隱藏是否有子類

我試圖製作一個打印樣式表，它隱藏（不打印）沒有子類元素的集合類。CSS - 隱藏是否有子類

我認爲這可能工作，但可悲的是它沒有。

<style type="text/css" media="print"> 
    table:not(> thead > tr > th > .Collapse) { 
     display:none; 
    } 
</style>

我不想雖然使用如果可能的話任何JavaScript。

可以這樣做嗎？

下面是有問題的元素的HTML ...打印時第二個表應該被隱藏...

來源

2013-06-24 Tom

的[是否有CSS父選擇？]可能重複（http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector） –

如果我沒有弄錯，你不能在沒有javascript的情況下這樣做。我可能是錯的...因此評論，而不是一個答案！ :) – bPratik

不可能沒有父選擇器（目前不存在於CSS中）或JS。爲什麼班級不能上桌？ – MasNotsram

要定位跨度：

table > thead > tr > th > .Expand { 
    display:none; 
}

更新

瞄準一個CSS類，並實現它的父目前不可能。隱藏表的最簡單方法是向其中添加一個類，然後可以輕鬆地定位該類。

例

<table> 
    <thead> 
     <tr> 
      <th> 
       <span class="Collapse">Lorem ipsum...</span> 
      </th> 
     </tr> 
    </thead> 
    <tbody style="display: none; "> 
     <tr> 
      <td>Blah Blah...</td> 
     </tr> 
    </tbody> 
</table> 
<table class="hide-for-print"> 
    <thead> 
     <tr> 
      <th> 
       <span class="Expand">Lorem ipsum...</span> 
      </th> 
     </tr> 
    </thead> 
    <tbody style="display: none; "> 
     <tr> 
      <td>Blah Blah...</td> 
     </tr> 
    </tbody> 
</table>

來源

2013-06-24 16:04:17

我需要隱藏整個表格，而不僅僅是「.Expand」元素 – Tom

我會建議相反，把類的表，然後選擇跨度在他們裏面。

<table class="Collapse"> 
    <thead> 
     <tr> 
      <th> 
       <span>Lorem ipsum...</span> 
      </th> 
     </tr> 
    </thead> 
    <tbody style="display: none; "> 
     <tr> 
      <td>Blah Blah...</td> 
     </tr> 
    </tbody> 
</table> 
<table class="Expand"> 
    <thead> 
     <tr> 
      <th> 
       <span>Lorem ipsum...</span> 
      </th> 
     </tr> 
    </thead> 
    <tbody style="display: none; "> 
     <tr> 
      <td>Blah Blah...</td> 
     </tr> 
    </tbody> 
</table> 

.Collapse { 
    display:none; 
} 

.Collapse thead tr th span { 
} 

.Expand thead tr th span { 
}

來源

2013-06-24 16:03:08 MasNotsram

CSS - 隱藏是否有子類

回答

相關問題