：CSS中的NOT选择器在我的情况下不起作用[重复]

Posted 2023-03-06

【中文标题】：CSS中的NOT选择器在我的情况下不起作用[重复]

【英文标题】：:NOT selector in css is not working in my case [duplicate]

【发布时间】：2020-02-01 11:46:53

【问题描述】：

我有如上图所示的 html 树结构。我正在将以下 CSS 应用于此 html 树结构，但它不起作用。

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

我的输出是这样的：

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

【问题讨论】：

您将模糊添加到 父元素，但想要排除其子元素。您应该使用同一级别的元素

不是将 blur 类作为一个整体添加到表中，而是需要将其添加到每一行。

这个东西可以应用到父子吗？

【参考方案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>

【参考方案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>