在底部完成编辑,请在此处查找当前问题
好吧,这是我尽可能多地研究的东西 - 但即使我是一个相当熟练的 Googler,我也不知道如何以某种方式简洁地正确描述这个问题。
我正在建立一个论坛。该论坛允许引用,这当然是通过样式化的引用框完成的。我遇到的问题不是引用本身不起作用,而是当其中几个引用交织在一起时就会出现问题。基本上,如果我引用一个报价。
如果包含多个样式,是否有办法通过 CSS 更改样式的行为?或者我是否必须以某种方式以编程方式禁止使用多个引号?应该有一些解决方法,我的意思是见鬼 - vBulletin 和 phpBB 让它工作,嘿!
我已经打印出来以显示手头的问题。您还可以在下面找到我为引号框设置的 CSS 样式。遗憾的是我不能在这里显示它,因为我没有这样做的声誉,但我会给你一个链接。
为澄清起见,“StackOverflow is awesome”应该放在第一个引号框中,在其中“确实如此”。将是第二个引号。
引号框的 CSS 样式:
p.quote::first-line {
font-size: 12px;
text-shadow: 3px 3px 4px rgba(150, 150, 150, 0.67);
}
p.quote {
background: #d4d4d4;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
font-size: 15px;
}
编辑
好的,按照建议使用 Blockquotes 似乎是一个很好的解决方案。然而,我遇到的问题是::first-line 参数在执行一次后似乎不再响应。 示例:http://jsfiddle.net/yLZf3/
最佳答案
您可能想看一下 <blockquote>
标记(引用 来自 MDN HTML element <blockquote> reference pages ):
<blockquote cite="http://developer.mozilla.org">
<p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>
并相应地设置样式。这样做的好处是可以为您的页面添加适当的语义,使用它可以为您省去一些麻烦,heres an (ugly) example :
HTML:
<blockquote cite="http://developer.mozilla.org">
<p>This is a quotation taken from the Mozilla Developer Center.</p>
<blockquote>
<p>This is another quote</p>
<blockquote>
<p>This is another quote</p>
</blockquote>
</blockquote>
</blockquote>
CSS:
blockquote {
background: #ccc;
border: 1px solid blue;
}
blockquote p {
padding-left: 16px;
}
关于重复 CSS 的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24348101/