CSS遵循表类，但跳过tr id

Question

我有这个：

table.eshop {
    border-collapse: collapse;
}
table.eshop tr {
    border: 1.5px solid #d8d8d8;
    border-style: none none solid solid;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}
table.eshop:not(#eshop_header) tr:hover {
    border-left: 7px solid #61ce70;
}
table.eshop td {
    height: 55px;
    padding: 0px 20px;
}
table.eshop a {
    font-family: Verdana;
    color: black;
    text-decoration: none;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}
table.eshop a:hover {
    color: #f77326;
}
#eshop_header {
    font-size: 23px;
    color: black;
    font-weight: bold;
}

和html：

<center>
<table width=100% class=eshop>
<tr><td align=left valign=middle width=100% id=eshop_header>CATEGORY</td></tr>
<tr><td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something1>something1</a></td></tr>
<tr><td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something2>something3</a></td></tr>
<tr><td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something3>something3</a></td></tr>
</table>
</center>

并且基本上，我需要CSS（tr：hover）不遵循<tr>，其中id = eshop_header。如您所见，我尝试了not（#eshop_header），但它不起作用：（

Answer 1

从我的理解出发，您正在尝试对ID为eshop_header的div没有悬停效果。请尝试将其添加到CSS中：

table.eshop tr:not(:first-child):hover { 
  border-left: 7px solid #61ce70;
            } 

*也请引用您的类和id属性名称

Answer 2

table.eshop:not(#eshop_header) tr:hover {
    border-left: 7px solid #61ce70;
}

意味着“ table.eshop”且没有ID“ eshop_header” => tr：hover，所以它不起作用。

当您将鼠标悬停在tr时，tr将会改变。

所以悬停流程元素是table.eshop => tr。

在tr上写#eshop_header，然后tr：not（#eshop_header）可以工作。

或

使悬停流程元素成为table.eshop => tr => td。

然后在td上写“ eshop_header”。

* { font-family: Verdana; color: #7a7a7a; line-height: 1.5em; font-size: 15px; } 
table.eshop {
      border-collapse: collapse;
    }

    table.eshop tr {
      border: 1.5px solid #d8d8d8;
      border-style: none none solid solid;
      -webkit-transition: 500ms;
      -moz-transition: 500ms;
      -o-transition: 500ms;
      transition: 500ms;
    }

    table.eshop tr:not(#eshop_header):hover {
      border-left: 7px solid #61ce70;
    }

    table.eshop td {
      height: 55px;
      padding: 0px 20px;
    }

    table.eshop a {
      font-family: Verdana;
      color: black;
      text-decoration: none;
      -webkit-transition: 300ms;
      -moz-transition: 300ms;
      -o-transition: 300ms;
      transition: 300ms;
    }

    table.eshop a:hover {
      color: #f77326;
    }

    #eshop_header td{
      font-size: 23px;
      color: black;
      font-weight: bold;
    }

<center>
    <table width=100% class=eshop>
      <tr id="eshop_header">
        <td align=left valign=middle width=100%>CATEGORY</td>
      </tr>
      <tr>
        <td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something1>something1</a></td>
      </tr>
      <tr>
        <td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something2>something3</a></td>
      </tr>
      <tr>
        <td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something3>something3</a></td>
      </tr>
    </table>
  </center>

#eshop_header td{
  font-size: 23px;
  color: black;
  font-weight: bold;
}