爲什麼頁面上的塊引號不具有相同的引用樣式？

Question

我在頁面上有幾個blockquote。我注意到，第一個擁有雙引號「;然而，所有的休息有單引號我不能肯定爲什麼

我使用的代碼是

<blockquote> 
<p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly.</p> 
</blockquote> 
<blockquote> 
<p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
</blockquote> 
<blockquote> 
<p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
</blockquote> 

而CSS是如下

。

blockquote { 
    border: 2px solid rgba(0, 0, 0, 0.1); 
    border-bottom: 0; 
    border-radius: 6px; 
    line-height: 140%; 
    margin: 0; 
    padding: 15px; 
    } 
    blockquote:before{content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;} 
    blockquote :first-child{display:inline;} 
    blockquote :last-child{margin-bottom:0;} 

人們可以找到它發生在一個的jsfiddle https://jsfiddle.net/u6gj18ev/

我很好奇，爲什麼它正在發生，如何解決這一問題

Answer 1

雙引號是第一個引號和單引號用於內部引號。

因爲您只使用open-quote，引號不會關閉，第一個引號後面的quoteblock會被視爲帶有單引號的內引號。

你需要密切引號：

blockquote:after { 
    content: close-quote; 
} 

如果你不想收盤報價，你需要使用：

blockquote:after { 
    content: no-close-quote; 
} 

如果你想單引號代替雙用途：

blockquote { 
    quotes: "'" "'"; 
} 

Answer 2

嘗試以下，

它取決於用戶端，如果對鉻的檢查，居然不支持content:open-quote

blockquote { 
 
     background: #f9f9f9; 
 
     border-left: 10px solid #ccc; 
 
     margin: 1.5em 10px; 
 
     padding: 0.5em 10px; 
 
     quotes:"\201C""\201D""\2018""\2019"; 
 
    } 
 
    blockquote:before { 
 
     color: #ccc; 
 
     content: "\""; 
 
     font-size: 4em; 
 
     line-height: 0.1em; 
 
     margin-right: 0.25em; 
 
     vertical-align: -0.4em; 
 
    } 
 
    blockquote p { 
 
     display: inline; 
 
    }

<blockquote> 
 
    <p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly.</p> 
 
</blockquote> 
 
<blockquote> 
 
    <p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
 
</blockquote> 
 
<blockquote> 
 
    <p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
 
</blockquote> 
 
<blockquote> 
 
    <p>Dynamically network highly efficient testing procedures for tactical solutions. Seamlessly..</p> 
 
</blockquote>