如何检测元素前面是否有纯文本？答案

【问题标题】：How do you detect if there is plain text preceding an element?如何检测元素前面是否有纯文本？
【发布时间】：2012-03-02 20:00:29
【问题描述】：

我有一些 HTML DIV 元素，其中包含叙述风格的表单。例如：

<div class="narrative">
    My name is <input type="text"> and I am <input type="text"> years old.
</div>

有没有办法用 CSS 检测第一个 <input> 元素之前是否有纯文本，以便我可以添加左边距？如果没有，建议如何做到这一点，而不必对第一个输入进行分类或将纯文本包装在一个跨度中？

它不会总是以纯文本开头：

<div class="narrative">
    <input type="text"> is <input type="text"> years old.
</div>

【问题讨论】：

CSS 将样式应用于 HTML。它不能“检测”任何东西。
即使 CSS 可以检测到文本节点，你的两个 sn-p 之间也不会有区别，因为你的第二个 sn-p 中的空白构成了一个纯文本节点。再说一次，我只是个吹毛求疵的人。
@Diodeus - 我明白这一点。我的问题在语义上不正确。

标签： html css

【解决方案1】：

CSS 只能选择元素，不能选择元素中的单个文本节点。这是您必须通过 DOM 脚本和 CSS 完成的事情。

【讨论】：

在这个特定的用例中我真的无法访问 JS，所以它必须是一个纯 CSS 的修复。对我来说，这意味着我可能需要在 span 标签中包含纯文本。
啊。在这种情况下，是的，您必须将文本节点包装在 span 或其他一些无语义的内联元素中。在这种情况下，span 可能是您最好的选择。祝你好运！我不羡慕你的标记任务。

【解决方案2】：

CSS（理想情况下，显然并非在所有情况下都受到尊重）仅用于演示目的。您需要在 input 元素上添加边距的是 JavaScript。

【讨论】：

【解决方案3】：

不幸的是，没有一种 CSS 方法来确定输入是否以文本开头。您可以使用first-child 伪类来定位每个叙述块的第一个输入：

.narrative input:first-child {
   margin-left: 20px;   
}

这里是an example。

【讨论】：