我似乎不能改变离子输入的字体大小。我试过了
input {
font-size: 30px;
}但这行不通。然而，
input {
font-family: Times;
}工作，所以我不知道到底是什么问题。我甚至不能改变输入的高度作为
input {
height:100px;
}不起作用
然而，当我去掉HTML中引用Ionic CSS的行（lib\ionic\css\ionic.css）时，我的CSS工作正常。我认为我的CSS应该覆盖Ionic CSS，因为我的CSS在它之后，所以发生了什么，我如何修复它？
编辑：
即使我写了！important，也没用。有趣的是，
input {
height:100px; !important
font-family: Times;
}使字体不变，而
input { font-family：次;高度：100 px;！重要}
会改变字体。
EDIT 2：问题在于选择器的特异性：
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;
}而且成功了！
3条答案
按热度按时间uqxowvwt1#
很有可能框架中所陈述的特性比你在CSS中所提供的特性更大。
使用开发工具通过检查元素来跟踪特定的样式，应该会向您展示框架是如何定义其选择器的。
正如一些人提到的，使用
!important可以解决这个问题，但它不是一个推荐的解决方案，因为它欺骗了它的最大特异性，并且不能在以后被覆盖，除非使用选择器更具体并包括重要的语句。lmvvr0a82#
您需要将
!important放在分号之前。dsekswqp3#
正如这里所述https://ionicframework.com/docs/v6/api/textarea#theming在文档中，你不应该试图改变“input”或“textarea”的常规样式。相反，只需使用自定义类：
你可以在component-css中修改所有需要的样式：