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 に答える