html - 为什么 <select>/<option> 列表中的文本不受应用于父 <html> 元素的 CSS 的影响？

为什么里面有文字 <select>/<option>列表不受应用于父项的 CSS 影响(“item1”、“item2”的颜色未更改)<html>元素？全部<p>元素受到影响!

另外，这有效:<select multiple style="color:red;">

:root {
  color: red;
}

<p> this text is affected

<!-- but item1, item2, etc within this list are not affected! -->
<select multiple>
  <optgroup label=animals>
    <option value="it1"> item1 </option>
    <option vslue="it3"> item2 </option>
    <option> item3 </option>
  </optgroup>
  <optgroup label=tiran>
    <option> item4 </option>
    <option selected> item5 </option>
    <option> </option>
    <optgroup>
</select>

什么时候会发生同样的事情，关于这个问题我应该知道什么规则？

我以为CSS是子元素继承的

这SO answer意味着 color: CSS 属性应被继承。

附言好像<select>被认为是一个表单元素，表单元素不继承任何属性(例如，来自 <body> 或 <html> 的父元素)- 根据 this SO answer , 同样适用于 <input> , <button>和 <textarea>

最佳答案

CSS 元素只有在有规则告诉它们时才继承属性值。例如