如何检测元素之前是否有纯文本？

我有一些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。它不能“检测”任何东西。 – 2012-03-02 20:02:17

即使CSS可以检测到文本节点，您的两个片段之间也没有区别，因为您的第二个片段中的空格构成纯文本节点。然后再次，我只是一个挑剔。 – BoltClock 2012-03-02 20:03:41

@Diodeus - 我明白。我的问题在语义上是不正确的。 – 2012-03-02 21:53:43

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

2012-03-02 20:24:21

我在这个特定的用例中并没有真正的JS访问权限，所以它必须是一个仅限CSS的修补程序。对我来说，这意味着我可能需要在span标签中包装纯文本。 – 2012-03-02 21:51:55

啊。在这种情况下，是的，您必须将文本节点封装在“span”或其他无语义内联元素中。在这种情况下'span'可能是你最好的选择。祝你好运！我不羡慕你的标记任务。 – 2012-03-07 18:25:15

CSS是（理想情况下，显然不是在所有情况下尊重）仅为表象的目的。您需要在您的input元素上添加边距是JavaScript。

2012-03-02 20:12:56

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

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

这里的an example。

2012-03-02 20:23:57 Pat

不幸的是，这不会在我的第二个例子上面的情况下工作。如果没有前面的文本，它会为输入添加一个边距，并将其排除在外。 – 2012-03-02 21:50:48

回答