CSS3 可以根據內容設定元素樣式嗎？

如何基於內容應用 CSS 規則

將特定樣式應用於包含特定單字或內容的元素是常見的要求短語。雖然現代 CSS 具有高級功能，但有一個特定方面它無法直接處理。

CSS3 可以基於內容設定元素樣式嗎？

簡單的答案是否定的。 CSS3 不包含允許您根據內容設定元素樣式的本機選擇器。提議的 :contains 選擇器將啟用此功能，已從 CSS3 選擇器的當前工作草案中刪除。

替代解決方案

實現基於內容的樣式，您可以使用 JavaScript。以下程式碼片段示範如何將紅色應用於包含單字「SpecificWord」的錨點：

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

此JavaScript 程式碼迭代所有錨點元素(document.links)，檢查其innerHTML 是否包含所需的內容word，如果為true，則套用紅色。

總之，儘管 CSS 本身不支援基於內容的樣式，但您可以使用 JavaScript 來實現類似的結果。這允許您為滿足特定內容要求的元素建立細粒度的樣式規則。

以上是CSS3 可以根據內容設定元素樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！