选择器td不包含表格

Question

请告诉我，我做错了什么？我需要为所有不包含表格的td设置样式：hover。我试图通过选择器和更多不同的方式来制作例外。希望展示几种解决方案，非常有趣

我的css风格：

.table-md td:not(:has(>table)):hover{
   background-color: #e0effd;
   transition: 0.2s ease;
   -moz-transition: 0.2s ease;
   -webkit-transition: 0.2s ease;
   transform: scale(1.02);
   -moz-transform: scale(1.02);
   -webkit-transform: scale(1.02);
}

HTML页面：

<table>
  <thead>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--For these, the style should be applied-->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr style="display: none;">
      <td collspan="10"> <!--For it, style shouldn't be applied-->
          <table>
             <thead>
                 <th>...</th>
                 <th>...</th>
                 <th>..</th>
             </thead>
             <tbody>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
             </tbody>   
          </table>
      </td>
    </tr>
  </tbody>
</table>

谢谢！

Answer 1

截至撰写此答案时:has() CSS pseudo-class 被视为实验技术 ¹ ;任何浏览器都不支持它，不打算在样式表中使用，也不应该在生产中使用。

浏览器支持：

1. MDN Browser compatibility table
2. Caniuse.com

  

在当前规范中，:has未标记为dynamic selector profile的一部分，这意味着它无法在样式表中使用;   仅限document.querySelector() ² 等函数。

来源：:has - CSS | MDN

替代解决方案：

1）jQuery

jQuery('td > table').parent().addClass('nested-table');

＆＃13;
＆＃13;
jQuery('td > table').parent().addClass('nested-table');
＆＃13;
/* Purely for the sake of demonstration */

td:not(.nested-table):hover {
    background: black;
    color: white;
}

td {
    height: 20px;
    width: 20px;
    transition: .7s;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--For these, the style should be applied-->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td collspan="10"> <!--For it, style shouldn't be applied-->
          <table>
             <thead>
                 <th>...</th>
                 <th>...</th>
                 <th>..</th>
             </thead>
             <tbody>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
             </tbody>   
          </table>
      </td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

2）Vanilla Javascript

var childNode = document.querySelector('td > table'),
    parentNode = childNode.parentNode;

parentNode.className = "nested-table";

＆＃13;
＆＃13;
var childNode = document.querySelector('td > table'),
    parentNode = childNode.parentNode;

parentNode.className = "nested-table";
＆＃13;
/* Purely for the sake of demonstration */

td:not(.nested-table):hover {
    background: black;
    color: white;
}

td {
    height: 20px;
    width: 20px;
    transition: .7s;
}
＆＃13;
<table>
  <thead>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--For these, the style should be applied-->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td collspan="10"> <!--For it, style shouldn't be applied-->
          <table>
             <thead>
                 <th>...</th>
                 <th>...</th>
                 <th>..</th>
             </thead>
             <tbody>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
             </tbody>   
          </table>
      </td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;