特定表行的CSS

Question

我有一个包含多行的简单表。顶行包含标题，而其下的行具有data的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不是我需要的限制。

Answer 1

你可以使用一个类，但更好的是，根本不使用类（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 */

只需使用th element指定表格标题即可。要在将鼠标悬停在每个表数据行时突出显示，只需使用tr:hover td规则来捕获该情况。有关工作示例，请参阅this fiddle。