Почему двойные кавычки отображаются только для первого элемента? - PullRequest
Новая
       11

Почему двойные кавычки отображаются только для первого элемента?

0 голосов
/ 26 апреля 2018

Мне интересно, почему браузер показывает двойные открытые кавычки только для первого элемента. Второй элемент имеет одинарные кавычки. 

a::before {
  content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Это потому, что вы не закрыли предыдущие кавычки, следующие кавычки останутся только с одним '.

, поэтому используйте псевдоэлемент after с content: close-quote

См. Фрагмент ниже: 

a::before{
    content: open-quote;
}
a::after{
    content: close-quote;
}
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Вы также можете редактировать первичные и вторичные кавычки в теге, используя quotes Свойство CSS следующим образом: 

a {
  quotes: "“" "”" "“" "”";
           ^   ^   ^   ^
           |   |   |   |
           |   |   |   |_ #secondary close quotes 
           |   |   |_____ #secondary open quotes 
           |   |_________ #primary close quotes    
           |_____________ #primary open quotes 
 }

см. Фрагмент ниже: 

a {
  quotes: "“" "”" "“" "”";
}

a::before{
    content: open-quote;
}
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>
0 голосов
/ 26 апреля 2018

Ваши открытые кавычки не заканчиваются, поэтому браузер делает «умное» предположение, что вы собираетесь вложить ваши кавычки, в результате чего двойные внешние кавычки для первого элемента и одинарные внутренние кавычки для второго. Вот как работает пунктуация в кавычках. См. Википедия и ссылки на вложенные цитаты в ней.

Примечательно, что границы элементов игнорируются, поэтому не имеет значения, даже если ваш второй элемент вложен глубже или оба элемента вложены в свои собственные родительские элементы, он все равно будет работать так же, что делает его особенно полезным в абзацы, которые могут содержать различные виды и комбинации фраз (a, br, code, em, span, strong и т. д., а также сам q). Как вложенные кавычки зависят исключительно от количества open-quote с и close-quote с, которые были сгенерированы в любой момент времени, и алгоритм подробно описан в разделе 12.3.2 спецификации CSS2 , заканчивая следующей заметкой:

Примечание. Глубина цитирования не зависит от вложенности исходного документа или структуры форматирования.

Для этого есть два так называемых «решения» этой проблемы, каждый из которых включает добавление псевдоэлемента ::after для выравнивания первого набора открытых кавычек.

Вставляя закрывающие кавычки, используя ::after, кавычка для первого элемента заканчивается до того, как встречается второй элемент, поэтому вложение кавычек отсутствует. 

a::before {
  content: open-quote;
}

a::after {
  content: close-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Если вы на самом деле не хотите отображать закрывающие кавычки, вы все равно можете запретить браузеру генерировать одинарные кавычки для второго элемента, используя no-close-quote. 

a::before {
  content: open-quote;
}

a::after {
  content: no-close-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>
...