用于重复CSS的CSS样式

Question

在底部编辑，请查看当前的问题

好的，这是我尝试尽可能多地研究的东西 - 但即使我是一名技术娴熟的Google员工，我也不知道如何以某种方式简洁地描述这个问题。

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

有没有办法通过CSS改变样式的行为，如果它包含多个？或者我是否必须以某种方式以编程方式禁止多个引号？应该是一些解决方法，我的意思是哎呀 - vBulletin和phpBB让它起作用，呵呵！

我已经打印出来显示手头的问题。下面你还会找到我的CSS样式的报价框。可悲的是，我无法在这里展示它，因为我没有这样做的声誉，但我会给你一个链接。

Click here for the image

为了澄清，＆＃34; StackOverflow非常棒＆＃34;应该落入第一个引用框，在其中，＆＃34;它确实是。＆＃34;将是第二个引用。

报价框的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;
}