CSS 速查：quotes 属性和 q HTML 标签

什么是 CSS Quickes？

我开始在 Instagram 上询问我喜爱的社区：“哪些 CSS 属性让您感到困惑？”

在“CSS Quickies”中，我将深入讲解一个 CSS 属性。这些属性是社区请求的。如果您也对某个 CSS 属性感到困惑，请在Instagram、Twitter或下方评论区留言！我会解答所有问题。

让我们讨论一下 CSS 中的引号

您知道可以使用 CSS 设置服装引言吗？

这可能是你的第一个问题，但我为什么需要自定义报价呢？我给你举几个例子。

• 如果用户想要复制，则不会选中 <q> 标签。这在某些希望用户选择某些内容并将其粘贴到终端的场景中很有用。
• 你需要一种特定类型的引号。引号类型包括单引号、双引号、尖角引号、双尖角引号、高斜体引号等等。
• 您不需要引号，但想要添加和附加自定义文本或表情符号。

<q> 标签

如果您想在任何其他 HTML 周围添加引号，您可以通过用标签将它们括起来来实现。

 <q>this will be in quotes.</q>

这将产生以下输出：“这将用引号引起来。”但是，如果您想要将 \' 作为引号或者您可能需要，该怎么办<< >>。

CSS 中的 quotes 属性

要更改 的默认行为quotes，您需要设置开始和结束引号。操作如下：

q {
  quotes: "<" ">"
}

 <q>this will be in quotes.</q>

这将产生与之前几乎相同的输出，但现在文本将被 <> 包裹。如下所示：

二级报价

有时，引号里会套着引号。如果你引用了某人的引号，而该人又引用了其他人的引号，就会出现这种情况。这种情况甚至可以延伸到更深的层级，但 CSS 不支持这种情况。以下是一个例子：

<q>First Level quotes <q>Second Level quotes</q></q>

输出将如下所示：“First Level quotes ‘Second Level quotes’”。现在，如果您想自定义它，只需向 quotes 属性添加更多参数即可。

q {
  quotes: "<" ">" "<<" ">>"
}

<q>First Level quotes <q>Second Level quotes</q></q>

现在输出将如下所示：<>>。这也很简单，对吧？

如果您想要在标签之外的其他元素上使用自定义引号该怎么办？

任何 HTML 标签周围的自定义引号

由于自定义引号可以是任何你能想到的字符串，它也可以包含表情符号😀。现在，你想在 span 元素之前或之后添加一个带有 class 为“custom-quotes-element”的表情符号。开始很简单；一切照常。

.custom-quotes-element {
  quotes:'🙌' '🙌';
}

如果仅仅这样应用，是行不通的。你需要在伪元素before和中为 content 属性设置特殊值after。

.custom-quotes:before {
  content: open-quote;
}

.custom-quotes:after {
  content: close-quote;
}

这段代码应该很容易理解。在本before例中，我们需要将 content 设置为open-quotes after quotes 属性. This will indicate that you want to have the first or third string from the。就是这样！property here and for thepseudo-element that you want to have the string as the content from the second and fourth string from the

我在 codepen 上创建了一个小型演示英雄。

👋问好！ Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube