css 相同的css属性_了解CSS的“内容”属性

css 相同的css属性

If you are a front-end developer there is a good chance that you have heard about pseudo-elements as well as CSS’s content property. I won’t discuss pseudo-elements in depth here, but I suggest you take a look at this Louis Lazaris’ article on Smashing Magazine if you are unfamiliar with the concept or need a quick refresher.

如果您是前端开发人员，那么您很有可能听说过伪元素以及CSS的content属性 。 我不会在这里深入讨论伪元素，但是，如果您不熟悉该概念或需要快速复习，建议您阅读一下Smashing Magazine上的Louis Lazaris这篇文章 。

In this article, we’ll focus on the content property. CSS’s content property works with the ::before and ::after pseudo-elements (which can use either single- or double-colon synax). The property is used to insert generated content in a web page and it is fully supported in all major browsers.

在本文中，我们将重点介绍content属性。 CSS的content属性与::before和::after伪元素一起使用(可以使用单冒号或双冒号synax)。 该属性用于在网页中插入生成的内容，所有主要浏览器均完全支持该属性。

content属性的基本语法 (Basic Syntax for the content Property)

The syntax for the content property is broken down as follows, with each of the values represented:

content属性的语法细分如下，每个值都表示：

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

The CSS differs slightly from value to value. For example, to use the attr() value with ::before or ::after, you need to write CSS like the following:

CSS的价值略有不同。 例如，要将attr()值与::before或::after ，您需要编写如下CSS：

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

That’s just one example, and more on that later. In the following sections I will discuss each value, including attr().

那只是一个例子，以后会更多。 在以下各节中，我将讨论每个值，包括attr() 。

值： none或normal (Value: none or normal)

When set to none, the pseudo-element is not generated. If you set it to normal it computes to none for the ::before and ::after pseudo-elements.

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

p::before {
  content: normal;
}

p::after {
  content: none;
}

This kind of thing might be used in nested elements that already have a pseudo-element defined but you want to override the pseudo-element in certain contexts.

这种事情可能会用在已经定义了伪元素的嵌套元素中，但是您希望在某些情况下覆盖伪元素。

值： <string> (Value: <string>)

This value sets the content to a string and can be any text content. If using non-latin characters, the characters need to be encoded. Let’s look at examples of each. Consider the following HTML:

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

<h2>Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass &amp; Less</li>
  <li>JavaScript</li>
</ol>

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

And then the following CSS:

然后是以下CSS：

.new::after {
  content: " New!";
  color: green;
}

.copyright::before {
  content: "\00a9  ";
}

Here we are inserting text content into one of the list items, and also inserting an encoded character (in this case, the copyright symbol) into the paragraph element.

在这里，我们将文本内容插入列表项之一，还将一个编码字符(在这种情况下为版权符号)插入到段落元素中。

See the Pen Content Property with Text by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上带有 SitePoint( @SitePoint )的文本的笔内容属性 。

A string value must have quotes surrounding it and these can be either single or double quotes.

字符串值必须用引号引起来，并且可以是单引号或双引号。

值： <uri> (Value: <uri>)

The <uri> value comes in handy when you are interested in displaying some sort of media, which you can do by pointing to an external resource (for instance an image). If for some reason the resource or image can’t be displayed, it is either ignored or some placeholder takes its place. Let’s look at some code that demonstrates the use of this value.

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

Here is the HTML:

这是HTML：

<a class="sp" href="https://www.sitepoint.com/">SitePoint</a>

And this is the CSS to show SitePoint’s favicon along with some text:

这是显示SitePoint图标和一些文本CSS：

.sp::before {
  content: url(https://www.sitepoint.com/favicon.ico);
}

See the Pen Content Property with url() by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint ) 带有url()的Pen Content属性 。

值： counter()或counters() (Value: counter() or counters())

This value is the most complex value that can be used with the content property. It is written as one of two different functions — counter() or counters(). For a more thorough discussion of CSS counters, check out this article. But here is a brief overview.

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

In the case of the first function, counter() , the generated text is the value of the innermost counter of the name that you specify in scope at this pseudo-element. It is formatted in decimal by default but can also be formated in roman numerals.

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

The other function, counters(name, string), is similar but represents all counters with the specified name (the first parameter) in the order from outermost to innermost. All these values are separated by the specified string (the second parameter). If you specify the name for the counter variable as none, inherit, or initial the declaration is ignored.

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

Here is an example to illustrate how to use a counter:

这是说明如何使用计数器的示例：

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

And here is the CSS:

这是CSS：

.planets {
  counter-increment: planetIndex;
}

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

This will number the items with generated content, similar to an ordered list. In this case, we could have easily used an ordered list. These types of counters are much handier when the items being numbered are interspersed among other elements.

这将对具有生成内容的项目编号，类似于有序列表。 在这种情况下，我们可以轻松使用有序列表。 当编号的项目散布在其他元素中时，这些类型的计数器会更方便。

Here is a demo that uses CSS counters with the counter() function in use.

这是一个使用CSS计数器和counter()函数的演示 。

值： attr() (Value: attr())

As shown earlier, the attr() function will insert the value of the specified attribute, which is the sole parameter. If the concerned element has no attribute, an empty string is returned.

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

Here’s an example:

这是一个例子：

<ul>
  <li><a href="https://www.sitepoint.com/html-css/">HTML and CSS</a></li>
  <li><a href="https://www.sitepoint.com/javascript">JavaScript</a></li>
  <li><a href="https://www.sitepoint.com/mobile/">Mobile</a></li>
</ul>

With the above HTML, the CSS below will show the value of the href attribute in parentheses next to the linked text:

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

a::after {
  content: " (" attr(href) ") ";
}

See the Pen Content Property using attr() by SitePoint (@SitePoint) on CodePen.

见笔内容属性使用ATTR()由SitePoint( @SitePoint )上CodePen 。

This trick is often used in print style sheets, to allow links to be visible in printed web pages.

此技巧常用于打印样式表中，以使链接在打印的网页中可见。

值： open-quote或close-quote (Value: open-quote or close-quote)

When set to one of these values, the content property generates an opening or closing quotation mark. It’s customarily used along with the <q> element, but you can use it with any element. So you might do something like the following:

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

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

See the Pen Content Property with open/close quotes by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上带有 SitePoint( @SitePoint )的开/关引号的Pen Content属性 。

The close-quote value will work only with the ::after pseudo-element (for obvious reasons) and it will not produce anything if a value of open-quote is not also present on the same element using ::before.

close-quote值仅适用于::after伪元素(出于显而易见的原因)，并且如果使用::before在同一元素上也没有出现open-quote的值，则不会产生任何结果。

值： no-open-quote或no-close-quote (Value: no-open-quote or no-close-quote)

The no-open-quote value removes the opening quote from the specified element and the no-close-quote removes the closing quote. You might wonder how these values are useful. Look at the following HTML:

no-open-quote值会删除指定元素的开头引号，而no-close-quote会删除结尾的引号。 您可能想知道这些值如何有用。 查看以下HTML：

<p><q>A wise man once said: <q>Be true to yourself,
but don't listen to those who say <q>Don't be true to 
yourself.</q></q> That is good advice.</q></p>

Take note that in the above paragraph, the speaker is quoting someone (“A wise man…”) who, in turn, is also quoting others (“those who say…”). So we have quotes nested 3 levels deep. Grammatically, there is a correct way to handle this. If using generated content, here is how we can ensure the quotes are nested correctly:

请注意，在上一段中，演讲者引用的是某人(“一个聪明的人……”)，而后者又引用了其他人(“那些说……的人”)。 因此，我们将报价嵌套了3个级别。 在语法上，有一种正确的方法来处理此问题。 如果使用生成的内容，则可以通过以下方法确保引号正确嵌套：

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

q::before { 
  content: open-quote;
}

q::after {
  content: close-quote;
}

The first selector defines the kinds of quotes we want to use, three levels deep, using the quotes property. Then we insert the quotes as content using pseudo-elements. This is similar to what we did in the previous section.

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

See the Pen Content property with nested quotes by SitePoint (@SitePoint) on CodePen.

请参见CodePen上带有 SitePoint( @SitePoint )的嵌套引号的Pen Content属性 。

But what if we want the second level of quotes to be ignored and not inserted, for whatever reason? We can use the no-open-quote and no-close-quote values to override them:

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

.noquotes::before {
  content: no-open-quote;
}

.noquotes::after {
  content: no-close-quote;
}

In this case, I’ve added a class of noquotes to the second level quote. This ensures that the quote nesting is still recognized, but the quotes don’t appear for that element. So the third level quote in that paragraph will have double curly quotes around it, rather than single curly quotes.

在这种情况下，我在第二级引用中添加了一个noquotes类。 这样可确保仍能识别引号嵌套，但不会对该元素显示引号。 因此，该段落中的第三级引号将在其周围有双引号，而不是单引号。

See the Pen Content property with no-open-quote/no-close-quote by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint ) 带有不带引号/不带引号的Pen 内容属性 。

结论 (Conclusion)

I hope this tutorial helped you to understand each of the values of the content property a little better and how they can be used in various scenarios.

我希望本教程可以帮助您更好地理解content属性的每个值，以及如何在各种情况下使用它们。

Check out the resources below for more info:

查看以下资源以获取更多信息：

• The content property on W3C

  W3C的content属性

• The content property on MDN

  MDN的content属性

• The quote property on MDN

  MDN上的quote属性

翻译自: https://www.sitepoint.com/understanding-css-content-property/

css 相同的css属性