时间戳

首页 > 解决方案 > CSS 跟随表类但跳过 tr id

html - CSS 跟随表类但跳过 tr id

问题描述

我有这个：

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>where id = eshop_header。
如您所见，我尝试过不（#eshop_header）但它不起作用:(

标签： htmlcssstylesstylesheet

解决方案

根据我的理解，您试图不对 id 为 eshop_header 的 div 产生悬停效果。尝试将其添加到您的 css 中：

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

*同时引用您的类和 id 属性名称

推荐阅读