了解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 属性的语法如下所示，其中包含每个值：

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

CSS 在不同值之间略有不同。例如，要将 attr() 值与 ::before 或 ::after 一起使用，您需要编写如下所示的 CSS：

p::after {
  content: " (" attr(title) ")";
}

这只是一个例子，稍后将详细介绍。在以下部分中，我将讨论每个值，包括 attr()。

值：none 或 normal

设置为 none 时，不会生成伪元素。如果将其设置为 normal，则对于 ::before 和 ::after 伪元素，它将计算为 none。

p::before {
  content: normal;
}

p::after {
  content: none;
}

这种方法可能用于嵌套元素，这些元素已经定义了伪元素，但您希望在某些上下文中覆盖伪元素。

值：<string>

此值将内容设置为字符串，可以是任何文本内容。如果使用非拉丁字符，则需要对字符进行编码。让我们来看一下每个示例。考虑以下 HTML：

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

然后是以下 CSS：

p::after {
  content: " (" attr(title) ")";
}

在这里，我们将文本内容插入到列表项之一中，并将编码字符（在本例中为版权符号）插入到段落元素中。

字符串值必须用引号括起来，这些引号可以是单引号或双引号。

值：<uri>

当您有兴趣显示某种媒体时，<uri> 值非常方便，您可以通过指向外部资源（例如图像）来实现。如果由于某种原因无法显示资源或图像，则会忽略它或使用某些占位符代替它。让我们来看一些演示此值的代码。

这是 HTML：

p::before {
  content: normal;
}

p::after {
  content: none;
}

这是显示 SitePoint 的 favicon 和一些文本的 CSS：

<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>

值：counter() 或 counters()

此值是可以与 content 属性一起使用的最复杂的值。它被编写为两个不同的函数之一——counter() 或 counters()。有关 CSS 计数器的更详细讨论，请查看这篇文章。但这里有一个简短的概述。

对于第一个函数 counter()，生成的文本是此伪元素作用域内您指定的名称的最内层计数器的值。默认情况下，它以十进制格式化，但也可以以罗马数字格式化。

另一个函数 counters(name, string) 类似，但表示所有具有指定名称（第一个参数）的计数器，顺序是从最外层到最内层。所有这些值都由指定的字符串（第二个参数）分隔。如果您将计数器变量的名称指定为 none、inherit 或 initial，则声明将被忽略。

以下是一个示例，说明如何使用计数器：

.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>

a9 "; }

这是 CSS：

.sp::before {
  content: url(https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico);
}

这将使用生成的內容对项目进行编号，类似于有序列表。在本例中，我们可以轻松使用有序列表。当要编号的项目散布在其他元素之间时，这些类型的计数器会方便得多。

值：attr()

如前所述，attr() 函数将插入指定属性的值，它是唯一的参数。如果相关元素没有属性，则返回空字符串。

这是一个例子：

<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>

使用上述 HTML，下面的 CSS 将在链接文本旁边显示括号中的 href 属性值：

.planets {
  counter-increment: planetIndex;
}

.planets::before {
  content: counter(planetIndex) ". ";
}

此技巧通常用于打印样式表中，以允许在打印的网页中显示链接。

值：open-quote 或 close-quote

设置为这些值之一时，content 属性将生成开引号或闭引号。它通常与 <q> 元素一起使用，但您可以将其与任何元素一起使用。因此，您可以执行以下操作：

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

close-quote 值仅适用于 ::after 伪元素（原因显而易见），如果在同一元素上使用 ::before 也没有 open-quote 值，则它不会产生任何内容。

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

no-open-quote 值将从指定元素中删除开引号，no-close-quote 值将删除闭引号。您可能想知道这些值如何有用。查看以下 HTML：

p::after {
  content: " (" attr(title) ")";
}

请注意，在上段中，说话者引用某人（“一位智者……”），而此人又引用其他人（“那些说……”）。因此，我们的引号嵌套了三层。从语法上讲，有一种正确的方法来处理这个问题。如果使用生成的内容，以下是我们可以确保引号正确嵌套的方法：

p::before {
  content: normal;
}

p::after {
  content: none;
}

第一个选择器使用 quotes 属性定义我们想要使用的引号类型，深度为三层。然后我们使用伪元素将引号插入为内容。这类似于我们在上一节中所做的。

但是，如果出于某种原因，我们希望忽略第二层引号而不插入它们怎么办？我们可以使用 no-open-quote 和 no-close-quote 值来覆盖它们：

<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>

在本例中，我在第二层引号中添加了一个名为 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中文网其他相关文章！