Div如何在css中調用類？

Question

我已經提到了下面的代碼。

需要輸出：當您單擊複選框時不顯示（隱藏）tr class =「invalid」列。如果未選中，則顯示所有tr列。

任何解決方案都是可觀的。

Answer 1

我想你可以使用鄰近的選擇，使其工作：

#testday input[type="checkbox"]:checked ~ #testtable .invalid { 
    display:none; 
} 

片斷如下：

#testday input[type="checkbox"]:checked ~ #testtable .invalid { 
 
    display: none; 
 
}

<div id="testday"> 
 
    <input type="checkbox" checked><span class="invalid black-border">Tests not in POR</span> 
 
    <table id="testtable" class="tablesorter custom-popup"> 
 
    <thead> 
 
     <tr> 
 
     <th data-priority="critical" class="testName">Test Name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="invalid"> 
 
     <td class="testName"> 
 
      <abbr title="BasicPerformanceMatrixTest">BasicPerformanceMatrixTest</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr class="invalid"> 
 
     <td class="testName"> 
 
      <abbr title="StripeReadECCFatalDuringPLIRestore_NSGSE-23331">StripeReadECCFatalDuringPLIRestore_NSGSE-23331</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr class="invalid"> 
 
     <td class="testName"> 
 
      <abbr title="ContextReplayTimes_NSGSE-27617">ContextReplayTimes_NSGSE-27617</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr class="invalid"> 
 
     <td class="testName"> 
 
      <abbr title="XORRecoveryShouldSkipRetiredPages_NSGSE-27131">XORRecoveryShouldSkipRetiredPages_NSGSE-27131</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="testName"> 
 
      <abbr title="PliDumpECCFatal(XOROn_2Codewords)[unaligned]_NSGSE-22801">PliDumpECCFatal(XOROn_2Codewords)[unaligned]_NSGSE-22801</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="testName"> 
 
      <abbr title="PliDumpECCFatal(XOROff_2Codewords)[unaligned]_NSGSE-22802">PliDumpECCFatal(XOROff_2Codewords)[unaligned]_NSGSE-22802</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="testName"> 
 
      <abbr title="PliDumpECCFatal(XOROff_1Page)_NSGSE-22803">PliDumpECCFatal(XOROff_1Page)_NSGSE-22803</abbr> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="testName"> 
 
      <abbr title="PLIECCFatal(SuperXORtest)_NSGSE-23162">PLIECCFatal(SuperXORtest)_NSGSE-23162</abbr> 
 
     </td> 
 

 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

DEMO

CSS

使用通用兄弟選擇器~ 它分隔兩個選擇器，並且只有第二個元素在第一個元素之前匹配，並且都共享一個共同的父元素。

input[type="checkbox"]:checked ~ table .invalid { 
    display:none; 
} 

Answer 3

input[type="checkbox"]:checked ~ #testtable .invalid { 
    display:none; 
} 

將是最簡單的方法。