Question

是否可以将以下HTML中的引号加粗和红色，而不更改HTML代码？

<div class="client_message">&ldquo; Ankit &rdquo;</div>

基本上我想要一些能产生同样效果的CSS “Ankit”但这些引号必须以粗体显示。

这只能用CSS吗？

Answer 1

你做不到。在选择非元素的东西时，CSS具有非常的限制功能。

最近的CSS为::first-letter，但这会选择“ A。

Answer 2

div.client_message:before {
    position: absolute;
    z-index: 2;
    overflow: visible;
    left: .0em;
    color: red;
    background-color: white;
    font-weight: bold;
    content: "“";
}
div.client_message:after {
    position: absolute;
    z-index: 2;
    overflow: visible;
    right: .0em;
    color: red;
    background-color: white;
    font-weight: bold;
    content: "”";
}
div.client_message {
    position: relative;
    display: inline;
    z-index: -1;
}

css有一个content属性和一个：before和：after选择器类，你可以使用它们来插入和设置引号样式。

注意不支持CSS内容属性旧版IE低于版本9 http://caniuse.com/css-gencontent

编辑你必须在CSS中做一些捏造，但你可以让它工作 http://jsfiddle.net/wtceu/

编辑2 我添加了背景颜色，以便HTML实体引号中的尾部不会通过新的重叠引号显示。唯一的问题是如果文本占用多行，结尾引号将无法正确定位（您可以通过缩小jsfiddle窗口的宽度来重现这一点）。

Answer 3

如果您可以使用JavaScript，则可以将HTML更改为

<div><q>Ankit</q></div>

（在评论中提到）

现在选择元素很容易

q {
    color: red;
    font-weight: bold;

}

Answer 4

 .client_message:before {color: red;font-weight: bold;content: "“";}

 .client_message:after {color: red;font-weight: bold;content: "”";}

Answer 5

行情需要标点符号。埃里克·迈耶（Eric Meyer）在786-788页的[[Css The Definitive Guide 4] [1]]中描述了“生成的报价”。

使用引号，您可以将引号模式定义为任意多个嵌套级别。例如，在英语中，一种常见的做法是从双引号开始，嵌套在第一个引号内的引号得到单引号。可以使用以下规则用“ curly”引号重新创建它：

quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }

<quotation>
<quote>
    In the beginning, there was nothing. 
    And God said:
    <q>
        Let there be light!
    </q>
  And <abbr>there&rsquo;s</abbr> some light, that’s [Mac keyb] good.
</quote>
The Holy Bible, Creation
</quotation>

“一开始什么都没有。上帝说：‘让我们有光！’那里就有光。”

英语缩写收缩中使用的假设（无首字母缩写）对Meyer的简单引号CSS无效。那是＆rsquo;和＆rdquo;引号[ abbr 和 acronnym ] [2]元素很有用。请注意，ABBR元素（例如WHO）与abbr属性是不同的（他已经做到了）。

还请注意，Apple设备的键盘使用 Option 和 Shift-Option 键以及 [和] 键，分别在此环境和许多其他网络环境中生成英文开/关双引号。。 Meyer的CSS和更简单的Apple键盘快捷键对于‹其他语言›（例如法语引号和标点符号）非常有效。

其他设备和网络可能会类似地适应甚至阻止HTML和CSS引用代码（以及相关标点符号）的简单显示。在适当的地方提供HTML / CSS指导没有错。卷曲的报价样式可以包含比简单的报价更多的内容。

[2]：https://maxdesign.com.au/news/abbreviations/ ...没有讨论作为书面语录基础的块元素。压缩和引号，CSS技术字符串的焦点趋向于忽略主流卷曲引号的发展。迈耶是一个重要的例外。

Answer 6

很显然，我们可以做到的事远远超过大多数人所意识到的，而在我们的集体知识库中几乎没有被脚本遗忘的事情。顺便说一句，如果Stack引号更易读，那就太好了。

向前迈进，也许为了更好地覆盖我们的基础，CSS应该看起来像这样。

quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
quote { quotes: '\201C' '\201D'; }
blockquote { quotes: '"' '"' "'" "'" '"' '"'; } 
blockquote p::before { content: open-quote; } 
blockquote p::after { content: no-close-quote; }

Google发现许多人无法为简单的引号设置样式。仍在寻找收缩代码：即， root'扩展名所有格右偏单引号样式。当前的DOM可以在没有脚本的情况下处理收缩单引号吗？那是什么把戏？

如何在元素中设置特定符号的样式？

6 个答案: