重复 CSS 的 CSS 样式

Question

在底部完成编辑，请在此处查找当前问题

好吧，这是我尽可能多地研究的东西 - 但即使我是一个相当熟练的 Googler，我也不知道如何以某种方式简洁地正确描述这个问题。

我正在建立一个论坛。该论坛允许引用，这当然是通过样式化的引用框完成的。我遇到的问题不是引用本身不起作用，而是当其中几个引用交织在一起时就会出现问题。基本上，如果我引用一个报价。

如果包含多个样式，是否有办法通过 CSS 更改样式的行为？或者我是否必须以某种方式以编程方式禁止使用多个引号？应该有一些解决方法，我的意思是见鬼 - vBulletin 和 phpBB 让它工作，嘿!

我已经打印出来以显示手头的问题。您还可以在下面找到我为引号框设置的 CSS 样式。遗憾的是我不能在这里显示它，因为我没有这样做的声誉，但我会给你一个链接。

Click here for the image

为澄清起见，“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/

Answer 1

您可能想看一下 <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;
}