CSS继承的问题_Css - Fatal编程技术网

CSS继承的问题

css

CSS继承的问题,css,Css,我的CSS风格有些问题。目前，我有这样的想法： table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;} 在这之后，我发现我需要一些没有悬停的桌子。所以我继续用这个来覆盖： .image-result tr:hover { background-color: #FFF; } 但不幸的是，这对TR毫无作用你能建议我该怎么做吗搜索图像：搜寻 C C 试试这个更具体的 div.image-result tabl

我的CSS风格有些问题。目前，我有这样的想法：

table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}

在这之后，我发现我需要一些没有悬停的桌子。所以我继续用这个来覆盖：

.image-result  tr:hover { background-color: #FFF; }

但不幸的是，这对TR毫无作用

你能建议我该怎么做吗


搜索图像：
搜寻
C
C

试试这个更具体的

div.image-result table tbody tr:hover { background-color: #FFF; 
                                    color: theDefaultColor;}

更新：我已经试过了，它可以在FF和IE8上使用，没有在其他设备上测试过，但应该可以使用。但是，您必须为类添加其他样式，特别是“颜色”，否则将采用原始的悬停样式

更新2：根据OP代码进行修改

以下是我使用的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}
div.image-result table tbody tr:hover { background-color: #FFF; color: #000000;}
</style>
</head>
<body>
<div>
<table id="myTable" border="1">
<tbody>
<tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
</tr>
</tbody>
</table>
</div>
<div class="image-result">
<table id="myTable2" border="1">
<tbody>
<tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


表tbody tr:hover{背景色：#5A5A5A；颜色：#F9F9F9；}
div.image-result表tbody tr:hover{background color:#FFF；color:#000000；}
一个
两个
三
一个
两个
三

试试这个更具体的

div.image-result table tbody tr:hover { background-color: #FFF; 
                                    color: theDefaultColor;}

更新2：根据OP代码进行修改

以下是我使用的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}
div.image-result table tbody tr:hover { background-color: #FFF; color: #000000;}
</style>
</head>
<body>
<div>
<table id="myTable" border="1">
<tbody>
<tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
</tr>
</tbody>
</table>
</div>
<div class="image-result">
<table id="myTable2" border="1">
<tbody>
<tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


表tbody tr:hover{背景色：#5A5A5A；颜色：#F9F9F9；}
div.image-result表tbody tr:hover{background color:#FFF；color:#000000；}
一个
两个
三
一个
两个
三

您的第二个将被识别为比第一个更不特定的选择器。尝试以下方法使其更具体：

table.image-result tbody tr:hover { background-color: #FFF; }

（将图像结果类放在实际应用的位置）。

您的第二个将被识别为比第一个更不特定的选择器。尝试以下方法使其更具体：

table.image-result tbody tr:hover { background-color: #FFF; }

（将图像结果类放在实际应用的位置）。

尝试使用

.image-result tr:hover td { background-color:#fff; }

尝试使用

.image-result tr:hover td { background-color:#fff; }

基本上，选择器越具体，浏览器在应用该样式的规则时给予的优先级就越高。您的第一条规则更具体，因此优先级更高，这就是为什么不应用样式的原因。您可以这样做：

.image-result  tr:hover { background-color: #FFF !important; }

增加优先权。这通常不是推荐的方法，因为它（有一些理由）可以被视为是对真实问题的黑客攻击。也许更好的解决方案是使新规则至少与另一条规则一样具体：

table.image-result tbody tr:hover { background: #FFF; }

.image-result  tr:hover { background-color: #FFF !important; }

table.image-result tbody tr:hover { background: #FFF; }

问题可能是第二个选择器中的两个空格而不是一个。HTML看起来像什么？我怀疑.image结果tr:hover选择器实际上不匹配。我添加了HTML，可以吗check@DucDigital：哇，这使我的答案无效，我的假设是错误的。该选择器“

div.image-result table tbody tr:hover

”应该可以工作。我也更新了我的答案。问题可能是第二个选择器中的两个空格而不是一个。HTML看起来像什么？我怀疑.image结果tr:hover选择器实际上不匹配。我添加了HTML，可以吗check@DucDigital：哇，这使我的答案无效，我的假设是错误的。该选择器“

div.image-result table tbody tr:hover

”应该可以工作。我也更新了我的答案。不，它更具体。类别选择器在组C中，而第一个示例中使用的类型选择器在组D中。确定。所以问题是类在这里被应用于TR，所以选择器失败。不，它更具体。类别选择器在组C中，而第一个示例中使用的类型选择器在组D中。确定。所以问题是类在这里被应用于TR，所以选择器失败了。类别选择器在C组中，而第一个示例中使用的类型选择器在D组中。您的特殊性是反向的。类选择器在C组中，而第一个示例中使用的类型选择器在D组中。根据David Dorward对我的答案的评论，我认为这并不是因为它更具体，而是因为.image结果现在应用于正确的元素，我认为，在我的例子中，“specific”的定义可能略有不同。我的意思是具体的，因为它通过元素和父元素中的类名来针对预期的元素。根据David Dorward对我的答案的评论，我认为这并不是因为它更具体，而是因为.image结果现在应用于正确的元素，我认为，在我的例子中，“specific”的定义可能略有不同。我的意思是特定的，因为它通过元素和父元素之间的类名来定位预期的元素。