Question

我有来自RTE的用户生成内容的特殊样式。我通过RTE中的标签在用户生成的内容中插入了一些自定义组件。这些组件应具有完全不同的样式，不应继承用户内容样式。

我正在尝试使用nextUri":"/accounts/<acc-id>/envelopes?start_position=100&count=100&from_date=7%2f10%2f2016+5%3a24%3a59+AM&from_to_status=changed&to_date=8%2f14%2f2017+5%3a24%3a59+AM&status=Completed","previousUri":"","resultSetSize":"100","startPosition":"0","totalSetSize":"6709"} css选择器实现此功能，如下面的代码段所示。这适用于类的第一个子项，插入:not，但不适用于其子项。第三个你好＆＃39;不应该收到红色造型（我认为），但确实如此。难道我做错了什么？这是预期的行为吗？我怎样才能实现我的目标？

＆＃13;

:not

＆＃13;

.user-content :not(.component) p {
  color: red;
  font-size: 50px;
}

＆＃13;

Answer 1

:not个true条件符合class="wrapper"条件，因为它们不属于component类。使用:not将单独应用于每个元素，没有父子关系：

<div class="user-content">
  <div class="component">       :not(.component) is false
    <div class="wrapper">       :not(.component) is true, so rule applies.
      <p>Hello!</p>
    </div>
  </div>
</div>

要创建父子关系，请在规则中使用>：

.user-content > :not(.component) p

Answer 2

您的选择器获得了正确的结果，您需要使用>代替空格来获得预期结果.user-content > :not(.component) p

＆＃13;

.user-content > :not(.component) p {
  color: red;
  font-size: 50px;
}

＆＃13;

<!-- Styled user-content inside some wrapper -->
<div class="user-content">
  <div class="wrapper">
    <p>Hello!</p>
  </div>
</div>

<!-- A component inside user-content should be unstyled -->
<div class="user-content">
  <dov class="component">
    <p>Hello!</p>
  </dov>
</div>

<!-- But nested elements of a component still recieve styling -->
<div class="user-content">
  <div class="component">
    <div class="wrapper">
      <p>Hello!</p>
    </div>
  </div>
</div>

＆＃13;

：not selector不适用于嵌套元素

2 个答案: