html - 为什么 q 元素中的前导空格与其他内联元素的处理方式不同？

Question

似乎 <q> 中的前导空格元素始终保留(尽管标准化为单个空格)，而大多数内联元素并非如此。例如，以下代码 ( jsFiddle ):

<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q>  test</q> b <a href=#>  test</a> c
<br> a <q>test  </q> b <a href=#>test  </a> c
<br> a <q>  test  </q> b <a href=#>  test  </a> c

在我测试过的所有现代浏览器(Chrome、FF 和 Edge)中都像这样呈现:

在第二行和第四行，<q>以初始空格呈现，而 <a>不是。这是为什么？

编辑:将以下 CSS 添加到上面的 fiddle 中:

a::before, a::after {
   content: '"';
}

使它们呈现相同。所以它似乎与 CSS ::before 有关选择器。

Answer 1

根据 Chrome's docs on default styles for HTML elements , <q> 的默认样式元素(引用)是:

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

q::after {
    content: close-quote;
}

如您所见，如果您将相同的样式应用于 <a>元素( anchor )，你会得到相同的结果:

body {
  font-size: 200%;
}

q {
  background-color: #AAF;
}

a {
  background-color: #FAA;
}
a::before {
  content: open-quote;
}

a::after {
  content: close-quote;
}

<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q>  test</q> b <a href=#>  test</a> c
<br> a <q>test  </q> b <a href=#>test  </a> c
<br> a <q>  test  </q> b <a href=#>  test  </a> c

理解这个的关键在于解释什么是::before和 ::after . According to MDN ，它们创建一个伪元素，它是匹配元素的第一个(对于 ::before )或最后一个(对于 ::after )子元素。所以你可以想象，一个内含引号的内联元素被添加为每个 <q> 的第一个子元素。 .

例如:

<br> a <span><span>"</span>    b</span>

在b 前显示一个空格，同时:

<br> a <span>    b</span>

不显示b之前的空格.

你可以在这里看到它的实际效果:

body {
  font-size: 200%;
}

q {
  background-color: #AAF;
}

a, span {
  background-color: #FAA;
}

<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q>  test</q> b <a href=#>  test</a> c
<br> a <q>test  </q> b <a href=#>test  </a> c
<br> a <q>  test  </q> b <a href=#>  test  </a> c
<br> a <span><span>"</span>    a</span>
<br> a <span>    a</span>