了解CSS＆＃x27;內容＆＃x27;財產

核心要點

• CSS content 屬性與 ::before 和 ::after 偽元素配合使用，可在網頁中插入生成的內容。它支持多種值，包括 normal、counter、attr、字符串、open-quote、url、initial 和 inherit。
• content 屬性可用於插入文本、編碼字符、媒體文件，甚至計數器的值。例如，attr() 函數可用於插入指定屬性的值。
• open-quote 或 close-quote 值使用 content 屬性生成開引號或閉引號。 no-open-quote 或 no-close-quote 值可用於從指定元素中刪除開引號或閉引號。
• 雖然 CSS content 屬性主要與 ::before 和 ::after 偽元素一起使用，但它也可以與 ::marker 偽元素一起使用，以自定義列表項目符號或編號的外觀。

如果您是前端開發人員，您很有可能聽說過偽元素以及 CSS 的 content 屬性。本文不會深入討論偽元素，但如果您不熟悉該概念或需要快速復習，建議您查看 Louis Lazaris 在 Smashing Magazine 上的文章。

本文將重點介紹 content 屬性。 CSS 的 content 屬性與 ::before 和 ::after 偽元素（可以使用單冒號或雙冒號語法）一起使用。該屬性用於在網頁中插入生成的內容，並且在所有主要瀏覽器中都完全受支持。

content 屬性的基本語法

content 屬性的語法如下所示，其中包含每個值：

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

CSS 在不同值之間略有不同。例如，要將 attr() 值與 ::before 或 ::after 一起使用，您需要編寫如下所示的 CSS：

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

這只是一個例子，稍後將詳細介紹。在以下部分中，我將討論每個值，包括 attr()。

值：none 或 normal

設置為 none 時，不會生成偽元素。如果將其設置為 normal，則對於 ::before 和 ::after 偽元素，它將計算為 none。

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

這種方法可能用於嵌套元素，這些元素已經定義了偽元素，但您希望在某些上下文中覆蓋偽元素。

值：<string></string>

此值將內容設置為字符串，可以是任何文本內容。如果使用非拉丁字符，則需要對字符進行編碼。讓我們來看一下每個示例。考慮以下 HTML：

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

然後是以下 CSS：

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

在這裡，我們將文本內容插入到列表項之一中，並將編碼字符（在本例中為版權符號）插入到段落元素中。

字符串值必須用引號括起來，這些引號可以是單引號或雙引號。

值：<uri></uri>

當您有興趣顯示某種媒體時，<uri></uri> 值非常方便，您可以通過指向外部資源（例如圖像）來實現。如果由於某種原因無法顯示資源或圖像，則會忽略它或使用某些佔位符代替它。讓我們來看一些演示此值的代碼。

這是 HTML：

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

這是顯示 SitePoint 的 favicon 和一些文本的 CSS：

<code class="language-html"><h2>Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p></code>

值：counter() 或 counters()

此值是可以與 content 屬性一起使用的最複雜的值。它被編寫為兩個不同的函數之一——counter() 或 counters()。有關 CSS 計數器的更詳細討論，請查看這篇文章。但這裡有一個簡短的概述。

對於第一個函數 counter()，生成的文本是此偽元素作用域內您指定的名稱的最內層計數器的值。默認情況下，它以十進制格式化，但也可以以羅馬數字格式化。

另一個函數 counters(name, string) 類似，但表示所有具有指定名稱（第一個參數）的計數器，順序是從最外層到最內層。所有這些值都由指定的字符串（第二個參數）分隔。如果您將計數器變量的名稱指定為 none、inherit 或 initial，則聲明將被忽略。

以下是一個示例，說明如何使用計數器：

<code class="language-css">.new::after {
  content: " New!";
  color: green;
}

.copyright::before {
  content: "<pre class="brush:php;toolbar:false"><code class="language-html"><a class="sp" href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a></code>

a9 "; }

這是 CSS：

<code class="language-css">.sp::before {
  content: url(https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico);
}</code>

這將使用生成的內容對項目進行編號，類似於有序列表。在本例中，我們可以輕鬆使用有序列表。當要編號的項目散佈在其他元素之間時，這些類型的計數器會方便得多。

值：attr()

如前所述，attr() 函數將插入指定屬性的值，它是唯一的參數。如果相關元素沒有屬性，則返回空字符串。

這是一個例子：

<code class="language-html"><h2>Name of First Four Planets</h2>
<p class="planets">Mercury</p>
<p class="planets">Venus</p>
<p class="planets">Earth</p>
<p class="planets">Mars</p></code>

使用上述 HTML，下面的 CSS 將在鏈接文本旁邊顯示括號中的 href 屬性值：

<code class="language-css">.planets {
  counter-increment: planetIndex;
}

.planets::before {
  content: counter(planetIndex) ". ";
}</code>

此技巧通常用於打印樣式表中，以允許在打印的網頁中顯示鏈接。

值：open-quote 或 close-quote

設置為這些值之一時，content 屬性將生成開引號或閉引號。它通常與 <q></q> 元素一起使用，但您可以將其與任何元素一起使用。因此，您可以執行以下操作：

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

close-quote 值僅適用於 ::after 偽元素（原因顯而易見），如果在同一元素上使用 ::before 也沒有 open-quote 值，則它不會產生任何內容。

值：no-open-quote 或 no-close-quote

no-open-quote 值將從指定元素中刪除開引號，no-close-quote 值將刪除閉引號。您可能想知道這些值如何有用。查看以下 HTML：

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

請注意，在上段中，說話者引用某人（“一位智者……”），而此人又引用其他人（“那些說……”）。因此，我們的引號嵌套了三層。從語法上講，有一種正確的方法來處理這個問題。如果使用生成的內容，以下是我們可以確保引號正確嵌套的方法：

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

第一個選擇器使用 quotes 屬性定義我們想要使用的引號類型，深度為三層。然後我們使用偽元素將引號插入為內容。這類似於我們在上一節中所做的。

但是，如果出於某種原因，我們希望忽略第二層引號而不插入它們怎麼辦？我們可以使用 no-open-quote 和 no-close-quote 值來覆蓋它們：

<code class="language-html"><h2>Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p></code>

在本例中，我在第二層引號中添加了一個名為 noquotes 的類。這確保了引號嵌套仍然被識別，但該元素的引號不會出現。因此，該段落中的第三層引號將帶有雙花括號，而不是單花括號。

結論

我希望本教程能幫助您更好地理解 content 屬性的每個值以及如何在各種場景中使用它們。

常見問題解答 (FAQ) 關於 CSS 內容屬性

什麼是 CSS 內容屬性以及如何使用它？

CSS content 屬性是一個強大的工具，允許您在頁面的佈局中插入生成的內容。它通常與 ::before 和 ::after 偽元素一起使用，通過 CSS 添加裝飾性內容，而不是將其包含在 HTML 中。例如，您可以使用 content 屬性在塊引用周圍插入引號，或在標題之前添加裝飾性圖像。 content 屬性的值可以是字符串、URL、計數器，甚至是屬性的值。

CSS 內容屬性能否與除 ::before 和 ::after 之外的元素一起使用？

CSS content 屬性主要與 ::before 和 ::after 偽元素一起使用。但是，它也可以與 ::marker 偽元素一起使用，該元素表示列表項的標記框。這允許您自定義列表項目符號或編號的外觀。

如何使用 CSS 內容屬性顯示屬性值？

CSS content 屬性可以使用 attr() 函數顯示 HTML 屬性的值。例如，您可以使用它來顯示鏈接的 href 屬性的值，從而使用戶可以看到實際的 URL。語法將是 content: attr(href)。

我可以使用 CSS 內容屬性插入圖像嗎？

是的，CSS content 屬性可以使用 url() 函數插入圖像。圖像將插入 ::before 或 ::after 偽元素放置的位置。例如，content: url(image.jpg) 將插入名為 image.jpg 的圖像。

如何將計數器與 CSS 內容屬性一起使用？

CSS content 屬性可以使用 counter() 或 counters() 函數顯示計數器。這對於自動對文檔中的標題或部分進行編號非常有用。您首先使用 counter-reset 屬性創建或重置計數器，並使用 counter-increment 屬性遞增它。然後，您可以使用 content: counter(myCounter) 來顯示計數器的當前值。

我可以在 CSS 內容屬性中使用特殊字符嗎？

是的，您可以通過使用它們的 Unicode 來在 CSS content 屬性中使用特殊字符。例如，content: “22” 將插入一個項目符號。請記住始終以反斜杠 () 開頭 Unicode。

CSS 內容屬性會影響 SEO 嗎？

通過 CSS 添加的內容通常被認為是裝飾性的，而不是應該被搜索引擎索引的內容。因此，最好將 CSS content 屬性用於裝飾性內容，而不是對 SEO 重要的內容。

我可以使用 CSS 內容屬性插入 HTML 嗎？

不可以，CSS content 屬性不能用於插入 HTML。它只能插入文本、圖像、計數器和屬性值。如果您需要插入 HTML，則應直接在 HTML 文檔中執行此操作或使用 JavaScript。

所有瀏覽器都支持 CSS 內容屬性嗎？

所有現代瀏覽器（包括 Chrome、Firefox、Safari 和 Edge）都廣泛支持 CSS content 屬性。但是，它可能在舊版本的 Internet Explorer 中不受完全支持。

我可以動畫化 CSS 內容屬性嗎？

不可以，CSS content 屬性不能進行動畫處理。這是因為它不是具有值範圍的屬性，而是設置特定值。如果您需要創建動畫，請考慮使用其他可以進行動畫處理的 CSS 屬性，例如 opacity 或 transform。

以上是了解CSS＆＃x27;內容＆＃x27;財產的詳細內容。更多資訊請關注PHP中文網其他相關文章！