jquery - 设置影子 dom :after using next sibling in css? 的样式

Question

好的，拿这个:

<div class="foo">
    <p>Lorem
       :after
    </p>
</div>

可以这样设计:

 .foo p:after{
   content: 'ipsum';
   display: block;
  }

现在我有一个使用 javascript 动态添加到 p 中的表单，如下所示:

<div class="foo">
    <p>Lorem
        <form action="POST">
            <input type="text" />
            <button>SEND</button>
        </form>
       :after
    </p>
</div>

但我不能像这样使用相邻的伪选择器来设置表单的样式:

 .foo p >form + *:after{
   content: 'ipsum';
   display: block;
  }

为什么不呢？ 以及我如何设计 :After 只有当它在表单旁边时？ 克里斯

Answer 1

您正在尝试为 ::after 元素的伪元素设置样式，这些伪元素是表单元素的直接兄弟元素，它是 p 元素的直接子元素，而 p 元素是 .foo 的子元素。所有其他条件都匹配，但结构中的 form 元素没有直接兄弟。

为了在表单元素作为子元素的情况下设置 p::after 的样式，您需要有一个父选择器，而这实际上并不存在。根据规范，规则如下所示:

!form > p::after { ... }