CSS幽靈選擇器在前端開發中是一個很有趣的概念。它是指設置了某一個元素的樣式，但是該元素有沒有出現在HTML文檔中。接下來我們將深入了解CSS幽靈選擇器是如何工作的。

.example {
color: red;
}
p:empty {
color: blue;
}

在上面的例子中，我們設置了一個CSS類樣式example，該樣式設置了文字顏色為紅色。然后，我們使用幽靈選擇器:empty，如果一個段落沒有文本內容，就將其文字顏色設置為藍色。

有內容的段落

在這個例子中，我們使用了.wrapper元素包含了三個元素：兩個段落和一個span。第一個段落沒有任何文本，使用了:empty幽靈選擇器，將被設置為藍色。第二個段落有文本內容，不符合:empty幽靈選擇器條件，不變化。最后的span元素并沒有應用任何樣式。

總之，CSS幽靈選擇器提供了一種靈活的方式來應用樣式，甚至在元素沒有出現在HTML文檔中時。它鼓勵開發者更好地組織代碼和思考前端開發的不同場景下應用樣式的方式。