为什么CSS "reset"销毁选择组？

Question

在我的主CSS文件中找到了这段代码 - 不知道它是如何进入那里的，或者为什么，但它看起来像是重置。漂亮的事情是，即使内容是空字符串，它也完全破坏了选定的选项组。

看看吧：

<style> *::after,
*::before {
  content: '';
}
</style>

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

https://jsfiddle.net/des2016/d3e6z3ay/

而且，哦，有趣的是，它只在Firefox上这样做。

1. 这个 CSS 应该为我们做什么？
2. 为什么它会破坏选项组？

Answer 1

* 用于表示所有元素。

::before创建一个伪元素，该伪元素是匹配元素的第一个子元素，::after伪元素与所选元素的最后一个虚拟子元素匹配。

它通常用于通过使用 content 属性向元素添加修饰内容。默认情况下，此元素是内联的。

下面的代码在所有元素之前和之后都放了一个''(无(。

<style> *::after,
*::before {
  content: '';
}
</style>

在

Firefox中，只有似乎很高兴的是，在这种特殊情况下，当您放置一些东西来分隔optgroup时，您会破坏它元素。