带有特定数据单元格的nth-child的CSS悬停不起作用

Question

我已经看到了另一个与此类似的问题，它显示了如何将hover添加到具有nth-child的选择器。它似乎确实有效，但是当我尝试仅针对特定单元格时（在后面的示例中，类“状态”应该是不同的颜色并具有悬停效果）。

tr {
  color: white;
}

tr:nth-child(even) {
    background-color: red;
}
tr:nth-child(odd) {
    background-color: blue;
}

.status tr:nth-child(even) {
    background-color: yellow;
}
.status tr:hover:nth-child(even){
    background-color: white;
}
.status tr:nth-child(odd) {
    background-color: green;
}
.status tr:hover:nth-child(odd){
    background-color: orange;
}

<table border="1">
<tr>
  <td>blue</td>
  <td>big</td>
  <td class="status">available</td>
</tr>
<tr>
  <td>yellow</td>
  <td>medium</td>
  <td class="status">available</td>
</tr>
<tr>
  <td>blue</td>
  <td>small</td>
  <td class="status">available</td>
</tr>
</table>

<p>The "available" cells should be either yellow or white, and when hovered green and orange. Other cells need to be either red or blue.</p>

“可用”细胞应该是黄色或白色，并且当悬浮在绿色或橙色时。其他细胞需要是红色或蓝色。

Answer 1

见下文。我将.status移到了定义的末尾。

tr {
  color: white;
}

tr:nth-child(even) {
    background-color: red;
}
tr:nth-child(odd) {
    background-color: blue;
}

tr:nth-child(even) .status {
    background-color: yellow;
}
tr:hover:nth-child(even) .status {
    background-color: green;
}
tr:nth-child(odd) .status  {
    background-color: white;
    color: black;
}
tr:hover:nth-child(odd) .status {
    background-color: orange;
}

<table border="1">
<tr>
  <td>blue</td>
  <td>big</td>
  <td class="status">available</td>
</tr>
<tr>
  <td>yellow</td>
  <td>medium</td>
  <td class="status">available</td>
</tr>
<tr>
  <td>blue</td>
  <td>small</td>
  <td class="status">available</td>
</tr>
</table>

<p>The "available" cells should be either yellow or white, and when hovered green and orange. Other cells need to be either red or blue.</p>

Answer 2

https://codepen.io/anon/pen/yXgREG

tr:nth-child(odd) .status {
    background-color: yellow;
}

tr:nth-child(odd) .status:hover {
    background-color: green;
}

tr:nth-child(even) .status {
    background-color: white;
}

tr:nth-child(even) .status:hover {
    background-color: orange;
}

tr:nth-child(odd) .status {
    background-color: yellow;
}

tr:nth-child(odd) .status:hover {
    background-color: green;
}

tr:nth-child(even) .status {
    background-color: white;
}

tr:nth-child(even) .status:hover {
    background-color: orange;
}

tr:nth-child(even) {
  background-color: red;
}

tr:nth-child(odd) {
  background-color: blue;
}

Answer 3

如上一个答案所述，您的悬停需要在第n个子选择器之后，因为您需要先定义要悬停的元素。此外，您的.status类应位于选择器的末尾，因为它是tr的子级。

＆＃13;

＆＃13;

tr {
  color: white;
}

tr:nth-child(even) {
  background-color: red;
}
tr:nth-child(odd) {
  background-color: blue;
}

tr:nth-child(even) .status  {
  background-color: yellow;
}
tr:nth-child(even):hover .status {
  background-color: white;
}
tr:nth-child(odd) .status {
  background-color: green;
}
tr:nth-child(odd):hover .status {
  background-color: orange;
}

＆＃13;

<table border="1">
<tr>
  <td>blue</td>
  <td>big</td>
  <td class="status">available</td>
</tr>
<tr>
  <td>yellow</td>
  <td>medium</td>
  <td class="status">available</td>
</tr>
<tr>
  <td>blue</td>
  <td>small</td>
  <td class="status">available</td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你犯了一个错误。你必须使用这个

tr:nth-child(even) .status {
    background-color: yellow;
}
tr:nth-child(even):hover .status{
    background-color: white;
}
tr:nth-child(odd) .status {
    background-color: green;
}
tr:nth-child(odd):hover .status {
    background-color: orange;
}

使用此功能，您将获得解决方案。

＆＃13;

＆＃13;

tr {
  color: white;
}

tr:nth-child(even) {
    background-color: red;
}
tr:nth-child(odd) {
    background-color: blue;
}

tr:nth-child(even) .status {
    background-color: yellow;
}
tr:nth-child(even):hover .status{
    background-color: white;
}
tr:nth-child(odd) .status {
    background-color: green;
}
tr:nth-child(odd):hover .status {
    background-color: orange;
}

＆＃13;

<table border="1">
<tr>
  <td>blue</td>
  <td>big</td>
  <td class="status">available</td>
</tr>
<tr>
  <td>yellow</td>
  <td>medium</td>
  <td class="status">available</td>
</tr>
<tr>
  <td>blue</td>
  <td>small</td>
  <td class="status">available</td>
</tr>
</table>

<p>The "available" cells should be either yellow or white, and when hovered green and orange. Other cells need to be either red or blue.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你犯了一个错误。你必须使用这个

tr:nth-child(even) .status {
    background-color: yellow;
}
tr:nth-child(even):hover .status{
    background-color: white;
}
tr:nth-child(odd) .status {
    background-color: green;
}
tr:nth-child(odd):hover .status {
    background-color: orange;
}

使用此功能，您将获得解决方案。