3

我对 CSS 的工作不是很好，所以在这里发布这个来获取一些信息。

请查看下面的代码，在哪里显示表格，每当鼠标在一行上移动时，该行就会突出显示。使用下面的代码，我只会突出显示偶数行。但是，如果您将类“highlight”移动到类“stripe2”下方，那么一旦鼠标在其上移动，每一行都会突出显示。有人可以解释一下为什么类定义的位置会影响显示吗？ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Striping/Hover Highlighting a Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#theList tr:even").addClass("stripe1");
        $("#theList tr:odd").addClass("stripe2");

        $("#theList tr").hover(
            function () {
                $(this).toggleClass("highlight");
            },
            function () {
                $(this).toggleClass("highlight");
            }
        );
    });
</script>
<style type="text/css">
th,td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #000000;
}
tr {
    border: 1px solid gray;
}
td {
    width:200px;
    padding:3px;
}
th {
    background-color:#D2E0E8;
    color:#003366
}
table {
    border: 1pt solid gray;
}
.clickable {
    cursor:pointer;
}
.stripe1 {
    background-color:#0f0;
}
.highlight {
    background-color: #ffcc00;
    font-weight:bold;
}
.stripe2 {
    background-color:#afa;
}

</style>
</head>
<body>
<h1>Using jQuery to stripe and hover-highlight a table</h1>
<table id="theList">
    <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <td>Milk</td>
      <td>1.99</td>
  </tr>
  <tr>
      <td>Eggs</td>
      <td>2.29</td>
  </tr>
  <tr>
      <td>Butter</td>
      <td>3.49</td>
  </tr>
  <tr>
      <td>Bread</td>
      <td>0.99</td>
  </tr>
  <tr>
      <td>Pasta</td>
      <td>1.19</td>
  </tr>
  <tr>
      <td>Honey</td>
      <td>4.39</td>
  </tr>
  <tr>
      <td>Cookies</td>
      <td>2.99</td>
  </tr>
  <tr>
      <td>Apples</td>
      <td>0.59</td>
  </tr>
  <tr>
      <td>Sugar</td>
      <td>1.78</td>
  </tr>
  <tr>
      <td>Pepper</td>
      <td>1.56</td>
  </tr>
  </tbody>
</table>
</body>
</html>
4

1 回答 1

0

问题是类.highlight和.stripe2具有相同的特异性，所以在你的 CSS 中最后出现的优先。您可以增加突出显示的特殊性，使其独立于 CSS 中的顺序。例如通过包含tr标签。

.highlight, 特异性 = 10

tr.highlight, 特异性 = 11

于 2012-11-25T02:03:50.900 回答