브라우저가 첫 번째 요소에 대해서만 큰 따옴표를 표시하는 이유가 궁금합니다. 두 번째 요소에는 대신 작은 따옴표가 있습니다.
a::before {
content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>
답변:
열려있는 따옴표는 종료되지 않으므로 브라우저는 따옴표를 중첩하려고한다는 "스마트 한"가정을하여 첫 번째 요소에는 바깥 쪽 큰 따옴표를, 두 번째 요소에는 작은 안쪽 따옴표를 만듭니다. 이것이 중첩 된 따옴표에서 따옴표가 작동하는 방식입니다. Wikipedia 및 그 안에 중첩 된 인용문에 대한 참조를 참조 하십시오 .
특히, 요소 경계는 무시되므로 두 번째 요소가 더 깊게 중첩되거나 두 요소가 모두 자신의 부모 요소에 중첩되어 있어도 여전히 동일한 방식으로 작동하므로 다음과 같은 단락에서 특히 유용합니다. 다른 종류 같이 분석 요소의 조합 (포함 a
, br
, code
, em
, span
, strong
, 등,뿐만 아니라 q
그 자체). 따옴표가 중첩 되는 방식은 특정 시점에 생성 된 open-quote
s 및 close-quote
s 의 수에 전적으로 의존 하며 알고리즘은 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>
이것은 이전 따옴표를 닫지 않았기 때문에 다음 따옴표는 하나만 남습니다 '
.
따라서 유사 요소 after
를content: close-quote
아래 스 니펫을 참조하십시오.
다음과 같이 따옴표 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>
open-quote
않는 열 견적을. 큰 따옴표 문자를 의미하지 않습니다.