Question

我使用CSS并不是很好用，所以在这里发布以获取一些信息。

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

<!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>

Answer 1

问题是类.highlight和.stripe2具有相同的特异性，因此CSS中的最后一个优先级最高。您可以增加突出显示的特异性，使其独立于CSS中的顺序。例如，包含tr标记。

.highlight，特异性= 10

tr.highlight，特异性= 11

类在样式标记中的位置因页面效果而异？

1 个答案: