Html 根据不带tds的单独表格的条件设置div样式

我有一张桌子，旁边有一个沙发

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

  <div>Table has not tds</div>

---

上述方法不起作用。有人能推荐使用纯CSS的解决方案吗？

CSS选择器上的

+

不起作用，因为

不是

的兄弟。另一方面，

table+div{something:something}

将起作用，因为它们将处于相同的层次结构级别

除此之外，不幸的是，AFAIK没有办法制定一个CSS规则，其中子对象影响父对象（或父对象的兄弟姐妹）

基本上，HTML需要以某种方式重新构造，以实现您想要的功能。例如，您可以编写一小段JS代码，在没有

s的情况下将一个类添加到表中，这样这个类就可以被CSS规则使用。

有一个纯CSS解决方案，但是您需要给表一个

thead

，

tbody

和

tfoot

，然后将未使用的

tfoot

重新用作您的“指示器”

div

：

表格{
显示：内联块；
宽度：150px；
右边距：148px；
高度：计算（100%-80px）；
垂直对齐：顶部；
}
thead，tbody，tr，th，td{
边框：1px实心rgb（191）；
}
t脚掌{
高度：80px；
}
tfoot td{
文本对齐：居中；
颜色：rgb（255255）；
背景色：rgb（255,0,0）；
转化：translateX（152px）；
填充：2px；
边框：2倍实心rgb（127,0,0）；
}
t车身+t脚部总成{
背景色：rgb（0127,0）；
边框：2倍实心rgb（0,63,0）；
转换：翻译（152px，-100%）；
}

姓名
这张桌子没有桌子
姓名
Alice01
Bob10
查克11
丹100
Eve101
这张桌子有一个桶体

谢谢你的建议。但是，我使用angular的ng类来检查应该填充表的数组的长度，并根据条件更改了div的样式。我认为：empty伪类将提供一个简单的css专用解决方案

 <table>
  <tbody>  
   <tr> 
     <th> 
         Name
     </th>
     <th>
         Age
     </th>
  </tr>
  <tr ng-repeat="person in people">
    <td>{{person.name}}</td>
    <td>{{person.age}}</td>
  </tr>
  </tbody>
 <table>

 <div ng-class="people.length < 1 ? 'highlight-div':''">
     Table has no tds
</div> 

---

如果没有

：matches（）

，我认为这是不可能的。如何使用：matches（）？我怀疑

：matches（）

是否能够解决这个特定问题。

 <table>
  <tbody>  
   <tr> 
     <th> 
         Name
     </th>
     <th>
         Age
     </th>
  </tr>
  <tr ng-repeat="person in people">
    <td>{{person.name}}</td>
    <td>{{person.age}}</td>
  </tr>
  </tbody>
 <table>

 <div ng-class="people.length < 1 ? 'highlight-div':''">
     Table has no tds
</div> 

   .highlight-div {
     background: red;
   }