css - CSS不会让我的内联样式覆盖选择框上的类

我想使用font-family：Arial Narrow;在此SELECT上，但由于某种原因，它不会让我覆盖字体家族。

我可以更改大小，颜色等，但不能更改家庭，为什么？

            <select multiple
                ng-options="item as item._id + ' - ' + item.name for item in vm.expenseCategory track by item._id"
                ng-model="vm.selectedExpense"
                style="font-family:'Arial Narrow'!important; font-size:12px;"
                class="startField ng-pristine ng-untouched ng-valid ng-empty">
            </select>

它几乎就像它忽略了！重要-我真的一点都不明白。

这是Chrome：



是否存在不能更改选择框上的字体系列的规则？

最佳答案

您可以将任何html元素的字体系列更改为所需的任何字体，只要该字体系列可用即可。 Arial Narrow字体是Microsoft Corporation的适当属性，因此默认情况下在Windows OS中可用。如果您在运行Windows操作系统的浏览器中打开页面，则页面将正确呈现，因为浏览器依赖于底层操作系统字体进行呈现。对于其他操作系统，您需要通过以下方式使Arial Narrow字体可用：


在计算机上安装Arial Narrow
或自己在服务器中托管Arial Narrow字体，然后浏览器将在加载页面时解析Arial Narrow字体（与Google字体几乎相同）

body * {
  font-family: "Roboto";
  /*
  font-size: 36px;
  color: red;
  */
}

/* Comment this selector if you uncomment font-size: 36px;
  color: red; in body * {} selector so you can test
 with inline style in your html markup
*/
#my-select-only * {
  font-family:'Arial Narrow';
}

<select id="my-select-only" multiple
                ng-options="item as item._id + ' - ' + item.name for item in vm.expenseCategory track by item._id"
                ng-model="vm.selectedExpense"
                style="font-family:'Arial Narrow'!important; font-size:12px;"
                class="startField ng-pristine ng-untouched ng-valid ng-empty">
                <option>Apple</option>
                <option>Orange</option>
            </select>

更新：由于您已经在css文件* { font-family: "Roboto"}中的某个位置进行了设置，因此它具有更高的特异性，尽管您指定了!important，但它将覆盖内联样式。我在此代码段中做了一些细微的更改，并以所需的字体很好地呈现