CSS：選擇一個文本，是不是一個span標籤內

Question

我有以下的DOM結構：

<label> 
    <select> 
    ... 
    </select> 
    records at one one time 
</label> 

現在，我打算隱藏文本records at one time如果網頁是一個基於移動瀏覽器中查看使用媒體查詢。

我的問題是如何在這裏選擇文本？請注意，此DOM是由庫（DataTables）自動生成的，我無法控制它，所以添加span類是不可能的。我希望對於移動瀏覽器，只有選擇顯示，而不是records at one time - 如何實現這一目標？

Answer 1

我將以此HTML爲例：

<label> 
    <p class="test">This is a test</p> 
    records at one one time 
</label> 

這真的取決於你想申請什麼樣的造型。

label { 
    color:red; 
} 

那是否可以覆蓋p範圍內的文字：只要不影響該元素的box-model您可以通過應用爲您的標籤默認的CSS樣式，這將同時影響文本使用和不使用p標籤做標籤使用：

label p { 
    color:yellow; 
} 

現在您可以看到只有沒有p標籤的文本纔有紅色。

Demo

Answer 2

有一個在CSS沒有這樣的選擇。選擇器只能選擇元素或僞元素，並且沒有僞元素可以幫助這裏。

但是，如果label元素僅包含select元素和要隱藏的文本，則可以使用CSS隱藏文本。您將隱藏label元素並「取消隱藏」select元素。你不能使用display: none，因爲它隱藏了所有的孩子。但還有其他方法。

也許最簡單的是這樣的：

label { visibility: hidden;} 
select { visibility: visible; } 

您可以將字體大小或者設置爲零，然後select元素所需的字體大小：

label { font-size: 0; } 
select { font-size: 12pt; } 

不幸的是，你需要設置這裏的物理單位的字體大小（或使用rem單位，但其瀏覽器支持仍然有限）。

某些瀏覽器具有最小字體大小的設置，但它似乎不適用於零字體大小。

Answer 3

這個怎麼樣？

label { 
    font-size: 0; 
} 
label p { 
    font-size: 14px; 
}