Question

我的代码：

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>元素没有继承font-family规范中的<body>属性？

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

Answer 1

如果您使用：

select {
  font-family: inherit;
}

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

Answer 2

是font-family：inherit似乎是最好的。
但除此之外：

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

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

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

Answer 3

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

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

您只需将samy样式应用于body和.myfont：

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

Answer 4

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

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

为什么我的<select>“font-family”属性不是继承自？</select>

4 个答案: