为什么我的<select>标签的"font-family"属性没有继承<body>的属性？

Question

为什么我的<select>标签的"font-family"属性没有继承<body>的属性？

7

我的代码：

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>的字体，为什么我要复制样式？

- Sabya

4个回答

1

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

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

你也可以将 '.myfont' 替换为 'select'，这样所有的选择元素都将使用此字体。

小技巧。不要在字体名称周围使用引号，因为并非所有浏览器都能理解它们。

- GONeale

0

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

只是让你知道，即使你必须“复制样式”，你也不必像上面那样复制样式。

你只需将相同的样式应用于body和.myfont，方法如下：

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

- Ambrose

0

詹姆斯的回答對我來說似乎最優雅和正確，但我想再添加另一種方法：

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

- nickf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Burgess · Accepted Answer

如果您使用：

select {
  font-family: inherit;
}

它会正常工作。在处理表单控件时，CSS 有点古怪。