[html] 첫 번째 요소에만 큰 따옴표가 표시되는 이유는 무엇입니까?

열려있는 따옴표는 종료되지 않으므로 브라우저는 따옴표를 중첩하려고한다는 “스마트 한”가정을하여 첫 번째 요소에는 바깥 쪽 큰 따옴표를, 두 번째 요소에는 작은 안쪽 따옴표를 만듭니다. 이것이 중첩 된 따옴표에서 따옴표가 작동하는 방식입니다. Wikipedia 및 그 안에 중첩 된 인용문에 대한 참조를 참조 하십시오 .

특히, 요소 경계는 무시되므로 두 번째 요소가 더 깊게 중첩되거나 두 요소가 모두 자신의 부모 요소에 중첩되어 있어도 여전히 동일한 방식으로 작동하므로 다음과 같은 단락에서 특히 유용합니다. 다른 종류 같이 분석 요소의 조합 (포함 a, br, code, em, span, strong, 등,뿐만 아니라 q그 자체). 따옴표가 중첩 되는 방식은 특정 시점에 생성 된 open-quotes 및 close-quotes 의 수에 전적으로 의존 하며 알고리즘은 CSS2 사양의 섹션 12.3.2에 자세히 설명되어 있으며 다음 메모로 끝납니다.

노트. 인용 깊이는 소스 문서의 중첩 또는 서식 구조와 무관합니다.

이를 위해이 문제에 대한 소위 “솔루션”이 두 가지 있는데, 두 가지 모두 ::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>