2

是否可以在不更改 HTML 代码的情况下将以下 HTML 中的引号变为粗体和红色？

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

基本上我希望有一些 CSS 产生与“Ankit”相同的效果，但这些引号必须是粗体。

仅使用 CSS 是否可行？

4

6 回答 6

2

你不能。在选择不是元素的东西时，CSS 的能力非常有限。

最接近的 CSS 是::first-letter，但那会选择&ldquo; A.

于 2013-07-25T13:20:36.357 回答
0

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

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

（之前评论中提到过）

现在选择元素很容易

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

}

于 2013-07-25T13:29:49.540 回答
0 
 .client_message:before {color: red;font-weight: bold;content: "“";}

 .client_message:after {color: red;font-weight: bold;content: "”";}
于 2013-07-25T13:32:06.610 回答
0 
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 窗口的宽度来重现这一点）。

于 2013-07-25T13:20:57.470 回答
-1

引号需要“所有”标点符号。在“[Css The Definitive Guide 4][1]”，第 786-788 页中，Eric Meyer 描述了“生成的引号”。

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

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>

“一开始，什么都没有。上帝说：“要有光！” 还有光。”</p>

英文缩写缩写中使用的假设（或首字母缩略词）不响应 Meyer 的简单引用 CSS。那就是“ 和“ 很有用，与引号、[ abbr和acronym ][2] 元素一起使用。请注意，ABBR 元素（例如，WHO）与 abbr 属性不同（它是一个，他完成了）。

另请注意，在此和许多其他 Web 环境中，Apple 设备键盘使用Option和Shift-Option键以及[和]键来分别生成英文开头和结尾的大引号。Meyer 的 CSS 和更简单的 Apple 键盘快捷键适用于‹其他语言›，例如法语引号标点。

其他设备和网络可能会类似地适应甚至阻止 HTML 和 CSS 引用代码（以及相关标点符号）的简单显示。在适当的情况下提供 HTML/CSS 指导并没有错。弯引号样式可以包含的不仅仅是简单的引号。

[1]：https ://itebooksfree.com/book/css-the-definitive-guide-4th-edition/31410 。迈耶和外尔 ©2018。

[2]: https://maxdesign.com.au/news/abbreviations/ ...没有讨论作为书面语言引用基础的块元素。缩引号，CSS技术字符串重点倾向于忽略主流花引号的开发。迈耶是一个重要的例外。

于 2020-10-08T09:51:31.180 回答
-1

显然，我们可以完成比大多数人意识到的要多得多的事情，而在我们的集体知识库中几乎没有脚本式的忽视。顺便说一句，如果 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; }

谷歌发现许多人无法设置简单引号的样式。仍在寻找收缩代码：即root'extension所有格单右花引号样式。当前的 DOM 可以在没有脚本的情况下处理收缩单右引号……那是什么技巧？

于 2020-10-08T14:50:07.843 回答