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

Question

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

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

            <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：

是否有规则无法更改选择框上的字体系列或？

Answer 1

只要该font-family可用，您就可以将任何html元素的font-family更改为您喜欢的任何字体。 Arial Narrow字体是Microsoft Corporation的适当属性，因此默认情况下在Windows操作系统中可用。如果您在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。我在这段代码片段中稍作修改，并使用您想要的字体呈现正确

Answer 2

你应该像这样使用font：

取代

  

font-family ：“Arial Narrow”！重要;

通过

  

font-family ：“Arial Narrow”，Arial，sans-serif;