CSS：第一个类型不起作用[重复]答案

【问题标题】：CSS :first-of-type isn't working [duplicate]CSS：第一个类型不起作用[重复]
【发布时间】：2015-06-26 04:16:47
【问题描述】：

谁能告诉我为什么我的表格的第二行没有灰色背景？

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.phone td {background:blue; color:white;}
.phone:first-of-type td {background:grey;}
</style>
</head>
<body>
<table>
<tbody>
    <tr class="email"><td>Row</td></tr>
    <tr class="phone"><td>Row</td></tr>
    <tr class="phone"><td>Row</td></tr>
</tbody>
</table>
</body>
</html>

【问题讨论】：

标签： css css-selectors

【解决方案1】：

first-of-type 选择器作用于标签或元素，而不作用于类或 ID。因此，在您的情况下，下面的选择器将为每种类型的第一个元素设置样式，该元素也恰好具有 class='phone'。

.phone:first-of-type td {background:grey;}

在您的代码中，第一个类型的元素都没有class='phone'。第一个tr 有class='email'。

如果您的第一个 tr 具有 class='phone'，则将应用该样式，如下面的 sn-p 所示。

.phone td {
  background: blue;
  color: white;
}
.phone:first-of-type td {
  background: grey;
}

<table>
  <tr class="email"> <!-- will not be styled because it doesn't have phone class-->
    <td>Row</td>
  </tr>
  <tr class="phone"> <!-- will not be styled either because it is not first tr -->
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>
</table>

<table>
  <tr class="phone"> <!-- will be styled because it is first tr and has phone class-->
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>
</table>

对于您的情况，您可以尝试以下 CSS。这会将所有 td 中的 background 设置为灰色，然后将其所有兄弟姐妹的 td 设置为灰色。

根据您的选择，您可以使用相邻兄弟选择器或通用兄弟选择器。一般兄弟选择器是最好的。

请注意，相邻兄弟选择器不适用于复杂情况，即在 class='phone' 的元素之间有其他类的元素。

.phone td {background:grey; color:white;}
.phone ~ .phone td { background: blue;}

.phone td {
  background: grey;
  color: white;
}
.phone ~ .phone td {
  background: blue;
}

/* Adding below just to show the difference between the two selectors */
.phone + .phone td {
  color: gold;
}

<table>
  <tr class="email">
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>
  <tr class="email">
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>  
</table>
<hr>
<table>
  <tr class="phone">
    <td>Row</td>
  </tr>
  <tr class="email">
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>
  <tr class="phone">
    <td>Row</td>
  </tr>
</table>

【讨论】：

太好了，谢谢。如果我们想要 10 部手机中的第二部“手机”，请您帮帮我。
感谢您的回复，哈利。如果我们在上面考虑你自己的sn-p，你能帮我吗。我想在第二个表中跟踪第二个电话。
@GauravLad：对于答案中的 sn-p，您可以在this demo 中找到仅设置第二个电话元素样式的方法。希望对你有帮助:)

【解决方案2】：

:first-of-type 查找元素（在兄弟列表中），而不是复杂的选择器。在这里，您的 .phone 元素都不是第一个兄弟元素 -- .email 是。

据我所知，在不改变 HTML 布局的情况下，没有办法在纯 CSS 中做到这一点。

【讨论】：