Question

为什么这不起作用？（我试图在div中创建一个取消某些东西的div）

＆＃13;

.blured {
  background-color: white;
  opacity: 0.1;
  filter: blur(10px);
}

.text {
  filter: blur(none);
  !
}

＆＃13;

<div class="blured">
  <div class="text">
    <center>
      <h1 style="font-size: 100px">Title</h1>
    </center>
    <h1 style="margin-top: 100px; text-shadow: 2px 2px 2px #000000;">The text</h1>
  </div>
</div>

＆＃13;

Answer 1

您无法撤消内部元素上的模糊。但是你可以（，这取决于你真正想要模糊的东西）添加一个:before伪元素和相应的样式。

例如

＆＃13;

.blured{position:relative;}

.blured:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  
  background: linear-gradient(to right, red,green);
  opacity: 0.1;
  filter: blur(10px);
  z-index:-1;
}

.text {
  filter: blur(none);
  !
}

＆＃13;

<div class="blured">
  <div class="text">
    <center>
      <h1 style="font-size: 100px">Title</h1>
    </center>
    <h1 style="margin-top: 100px; text-shadow: 2px 2px 2px #000000;">The text</h1>
  </div>
</div>

＆＃13;

Answer 2

您可以尝试“：not”css选择器。来自MDN的文件：https://developer.mozilla.org/en-US/docs/Web/CSS/:not。

...
 <MultiSelect model="event.category" options={this.props.categoryList} />
...

https://jsfiddle.net/vz044hof/

在CSS中覆盖div

2 个答案: