为什么我的 <select> “font-family” 属性不是从 <body> 继承的？答案

【问题标题】：Why isn't my <select> "font-family" property inheriting from <body>?为什么我的 <select> “font-family” 属性不是从 <body> 继承的？
【发布时间】：2009-01-05 12:51:21
【问题描述】：

我的代码：

body {
    font-family:"Verdana",Arial,Helvetica,sans-serif;
}
.myfont {
    font-family:"Verdana",Arial,Helvetica,sans-serif;
}

<body>
    Hello
    <select>
        <option>
            Hello
        </option>
    </select>
    <select class="myfont">
        <option>
            Hello
        </option>
    </select>
</body>

为什么第一个<select> 元素没有从<body> 的规范中继承font-family 属性？

如果我必须更改 <select> 的字体，为什么我必须复制样式？

【问题讨论】：

标签： html css inheritance font-family

【解决方案1】：

如果你使用：

select {
  font-family: inherit;
}

它会正常工作的。 CSS 在表单控件方面有点古怪。

【讨论】：

如何设置单独的不起作用。
如果你在一个单独的新问题中提出这个问题，你可能会得到更好的回答。

【解决方案2】：

是的字体系列：继承似乎是最好的。
但除此之外：

  body, .myfont
  {
    font-family:Verdana,Arial,Helvetica,sans-serif;
  }

如果您希望所有选择元素都使用它，您也可以将 '.myfont' 替换为 'select'。

热点提示。不要在字体系列名称周围使用引号，并非所有浏览器都能理解。

【讨论】：

【解决方案3】：

如果我必须更改字体 “选择”为什么我必须复制风格？

您知道，即使您确实必须“复制样式”，您也不必像上面那样复制样式。

您只需将 samy 样式应用到 body 和 .myfont 即可：

      .myfont, body 
      {
        font-family:"Verdana",Arial,Helvetica,sans-serif;
      }

【讨论】：

【解决方案4】：

詹姆斯的回答对我来说似乎是最优雅和正确的，但我想我只是添加另一种方式来做到这一点：

.myfont option {
     font-family: "Verdana"; /* etc */
}

【讨论】：