html - 根据没有 tds 的单独表格的条件设置 div 样式

Question

我旁边有一张 table 和一个 div。

 <table>
  <tbody>  
   <tr> 
     <th> 
         Name
     </th>
     <th>
         Age
     </th>
  </tr>
  </tbody>
 <table>

  <div>Table has not tds</div>

我想根据上表没有tds的情况来高亮div。

我试着这样做:

table tbody td:empty + div {
  background-color: red;
}

以上是行不通的。谁能建议使用纯 CSS 的解决方案？

Answer 1

+在 CSS 选择器上不起作用，因为 <div>不是 <td> 的 sibling .另一方面，table + div { something: something }会起作用，因为它们将处于同一层次结构级别。

除此之外，不幸的是，AFAIK，没有办法制定一个 child 影响 parent (也不是 parent 的 sibling )的 CSS 规则。

基本上，需要以某种方式重组 HTML 以执行您想要的操作。例如，如果没有 <td>，您可以编写一小段 JS 代码向表中添加一个类。 s，以便 CSS 规则可以使用此类。