Question

我似乎无法更改Ionic输入的字体大小。我试过了

input {
    font-size: 30px;
}

但这不起作用。但是，

input {
    font-family: Times;
}

有效，所以我不知道究竟是什么问题。我甚至无法改变输入的高度

input {
    height:100px;
}

不起作用。

然而，当我在我的HTML中引用Ionic CSS（lib \ ionic \ css \ ionic.css）中的行时，我的CSS工作。我认为我的CSS应该覆盖Ionic CSS，因为我的CSS就在它之后，所以发生了什么，我该如何修复它？

编辑：

即使我把！重要，它也不起作用。有趣的是，

input {
     height:100px; !important
     font-family: Times;
}

使得字体不会改变，而

输入{ font-family：Times; 高度：100像素; ！重要 }

会更改字体。

EDIT2：问题出在选择器特异性上：

 textarea, input[type="text"]... {
  display: block;
  padding-top: 2px;
  padding-left: 0;
  height: 34px;
  color: #111;
  vertical-align: middle;
  font-size: 14px;
  line-height: 16px;
}

覆盖了它，所以我只是将我的CSS改为

input[type="text"] {
font-size:30px;
}

它有效！

Answer 1

框架中陈述的特异性很可能大于您在CSS中提供的特异性。

使用开发工具通过检查元素来跟踪特定样式应该向您展示框架如何定义其选择器。

正如一些人所提到的，使用!important可以解决这个问题，但它不是一个推荐的解决方案，因为它欺骗了它的最大特异性并且以后不能被覆盖，除非更具体的是选择器并包括重要声明。

Answer 2

您需要在分号前添加!important。

在Ionic输入文本区域中更改字体大小

2 个答案: