html - 为什么 css "reset"会破坏 select optgroup？

Question

在我的主 css 文件中找到了这段代码——不知道它是如何进入那里的，也不知道为什么，但它看起来像是一个重置。有趣的是，即使内容是一个空字符串，它也会完全破坏选择的 optgroups。

检查一下:

<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. 为什么它会破坏 optgroups？

Answer 1

* 用于指示所有元素。

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

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

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

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

在 firefox 中，在这种特殊情况下，只有当你把一些东西分开 optgroup 时，你才会破坏它元素。