使用 CSS 定位單字似乎是一個不切實際的願望。然而，有一些巧妙的解決方法可以實現這種效果，特別是與 JavaScript 配合使用時。
考慮一個場景，您想要在段落中以紅色突出顯示字母「z」的所有實例。或者，在音樂符號的上下文中，您可能想要垂直對齊屬於「和弦」類別的元素內的所有上標「7」字元。
雖然純 CSS 無法直接解決此挑戰，但混合方法可以提供滿意的解決方案。以下程式碼示範如何實現這一點：
span.highlight {
background: #F60;
padding: 5px;
display: inline-block;
color: #FFF;
}
p {
font-family: Verdana;
}<p> Let's go Zapata let's do it for the revolution, Zapatistas!!! </p>
jQuery.fn.highlight = function(str, className) {
var regex = new RegExp(str, "gi");
return this.each(function() {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {
return "<span class=\"" + className + "\">" + matched + "</span>";
});
});
};
$("p").highlight("Z", "highlight");此程式碼利用jJava庫，用於搜尋匹配文字並將其替換為HTML 標記，其中包括自訂樣式類別。在此範例中，「highlight」類別被指派給段落元素中的所有「Z」字元。
結果
透過組合這些組件，可以實現所需的效果。例如，文字“Zapata Zapatistas！！！”將顯示所有“Z”字元以紅色突出顯示。 這種方法雖然不受 CSS 直接支持，但允許對網頁內容中的各個字元進行更好的自訂。以上是如何使用 CSS 和 JavaScript 為 Web 內容中的單一字元設定樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
