如果孙子有班级（SCSS），将风格应用于祖父母

Question

所以问题是如果包含一个选择了类的div，如何将样式应用于tr（背景颜色）。

<table>
<tr>
  <td>
    <div class="selected">1</div>
  </td>
  <td>
    <div>2</div>
  </td>
  <td>
    <div>3</div>
  </td>
</tr>
<tr>
  <td>
    <div>3</div>
  </td>
  <td>
    <div>4</div>
  </td>
</tr>
</table>

Answer 1

您在css中没有父选择器...您可以选择子项并设置它们的样式。你必须做一些JS或JQuery来解决这个问题。最简单的方法是使用jQuery。您可以选择父元素并为其添加一个类：

jQuery parent（）：https://api.jquery.com/parent/

另请参阅有关css父选择器的帖子：Is there a CSS parent selector?

还有其他方法可以使用JS / jQuery来解决这个问题，但你必须使用它，没有别的办法。

$('.selected').parent().parent().addClass('trBackground');

.trBackground {
  background-color: lightcoral;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="selected">1</div>
    </td>
    <td>
      <div>2</div>
    </td>
    <td>
      <div>3</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>3</div>
    </td>
    <td>
      <div>4</div>
    </td>
  </tr>
</table>