如何檢測元素之前是否有純文本？

我有一些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

回答