2

我有一个有几行的简单表。最上面的行包含标题，而它下面的行具有数据的 id 属性。我一直在尝试为只有 id 属性数据的表行设置 CSS，但到目前为止只能为整个表设置它。

<table width = "80%" align="center" id="example">
<tr>
<td><h3>ID</h3></td>
<td><h3>First Name</h3></td>
<td><h3>Last Name</h3></td>
</tr>
<tr id="data">
<td>1</td>
<td>Joe</td>
<td>Schmoe## Heading ##</h3><td>
</tr>
</table>

和CSS。我尝试将 #example tr 更改为 tr #data ，但没有成功。我知道我忽略了一些简单的东西，但我不确定是什么。

table#example {
    border-collapse: collapse;   
}
tr #data{
    background-color: #eee;
    border-top: 1px solid #fff;
}
tr #data:hover {
    background-color: #ccc;
}
tr #data {
    background-color: #fff;
}
tr #data th, tr #data td {
    padding: 3px 5px;
}
tr #data td:hover {
    cursor: pointer;
}

我没有使用类，因为我对 CSS 不够熟悉，并且只能使用一次 id 并不是我需要的限制。

4

1 回答 1

5

您可以使用类，但更好的是，根本不要使用类（HTML 标记是您的朋友）！这是您问题的干净解决方案：

HTML

<table>
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Joe</td>
        <td>Schmoe</td>
    </tr>
</table>

CSS

th {
  font-weight: bold;
  /* More styles here */
}

td {
  background: #EEE;
  border-top: 1px solid #FFF;
}

tr:hover td {
  cursor: pointer;
  background: #CCC;
}

/* Styles upon styles */

Simply use the th element to specify the table header. To get each table data row to highlight as you mouse over it, simply use the tr:hover td rule to catch that case. See this fiddle for a working example.

于 2012-11-15T00:39:46.170 回答