：在我的情况下，css中的选择器不起作用

Question

我具有html树结构，如上图所示。我正在将以下CSS应用于此html树结构，但无法正常工作。

.blur:not(.activerow){
  filter: blur(3px);
  pointer-events: none;
} 

我的输出是这样的：

整个页面变得模糊，包括activerow类。我想模糊整个blur类，除了activerow类

Answer 1

您需要将:not与目标元素类一起使用，在您的情况下为tr

.blur tr:not(.activerow) {
  filter: blur(3px);
  pointer-events: none;
}

.activerow {
  color: red;
}

<div class="blur">
  <table style="width:100%">
    <tr class="activerow">
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>
</div>

Answer 2

您正在将模糊效果应用于所有行的父级，因此排除行无济于事。您需要将效果应用于每一行，并排除不想要的行：

.blur tr:not(.activerow){
  filter: blur(3px);
  pointer-events: none;
} 

<div class="blur">
  <table>
    <tr><td>one</td><tr>
    <tr class="activerow"><td>two</td><tr>
    <tr><td>three</td><tr>
    <tr><td>four</td><tr>
  </table>
</div>