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;
  }

为什么不呢？我如何设计风格：仅在表格旁边？克里斯

Answer 1

您尝试将 ::之后的元素的伪元素设置为表单元素的直接兄弟元素，该元素是p元素的直接子元素，它是.foo 的子元素。所有其他条件都匹配，但结构中没有form元素的直接兄弟。

为了在有表单元素作为子元素的情况下设置p ::之后，您需要有一个父选择器，它实际上不存在。根据规范，规则看起来像：

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

造型阴影dom：在css中使用下一个兄弟之后？

1 个答案: