html - 为什么我的 CSS 样式会覆盖我的内联样式？

Question

我的 <input type=image>内联宽度/高度被我的 input 覆盖了样式。有没有办法纠正这个问题？还是内联样式在这种情况下不起作用？

HTML:

<form id="search" name="search" form method="get" action="find_search.php">
    <input type=  "text" name=     "q" value=""  />
    <input type="hidden" name=   "cat" value=""  />
    <input type="hidden" name=  "time" value="0" />
    <input type="hidden" name="letter" value=""  />
    <input type="hidden" name="offset" value="0" />
    <input type="hidden" name=  "type" value="quick" />
    <input type= "image" src="images/search_button.png" value="Search" width="200" height="50" />
</form>

CSS:

input {
   width:50%;
   padding:0px;
   outline:none;
   height:36px;
   font-size:24px;
}

Answer 1

您可以使用更具体的 CSS 选择器(例如 input[type=text])来完成此操作和 input[type=image] .因此，如果您希望问题中指定的高度/宽度仅适用于 <input type="text"> ，你会做这样的事情:

将非高度/宽度属性保留在不太具体的 input 中选择器:

input {
   padding:0px;
   outline:none;
   font-size:24px;
}

然后使用 input[type=text] 中的高度/宽度属性选择器:

input[type=text] {
   width:50%;
   height:36px;
}

然后您可以为 input[type=image] 添加不同的高度/宽度选择器:

input[type=image] {
   width: 200px;
   height: 50px;
}

此外，请记住，如果使用 id，您可以使选择器更加具体。的 form在你的选择器中，像这样:

• #search input
• #search input[type=text]
• #search input[type=image]