css - Override Default CSS Properties

Question

i do have a wordpress theme with the default input CSS.

input, input[type="text"], input[type="password"], input[type="datetime"],     input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],   input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border: none !important;
background-color: #f0efed;
line-height: 40px;
font-size: 16px;
color: #555;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: :0px;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 40px;
}

I want to override the input styles such as 'text'and 'submit' in a specific div only.

Sample HTML:

<div class="checkout_page_container">
<table class="checkout_cart">
<tr>
<td><input type="text" /></td>
</tr>
</table>
</div>

I'm trying this CSS. But they wont work..

.checkout_page_container .checkout_cart input[type="text"] {
border: 1px solid #666;
}

.checkout_page_container .checkout_cart input[type="submit"] {
border: 1px solid #ccc;
color:#000;
}

When i do inpect element. the browsers still detects the default input styles of the theme.

Answer 1

在 wordpress 主题中，它具有“边框：无！重要；” !important 意味着它不会被具有更高优先级的样式覆盖。

您可以删除它来修复它，但它可能会破坏页面上的其他内容（！important 在大多数情况下有点脏并且不是好的做法，所以它可能被使用是有原因的）

Answer 2

使用“mystyle: value !important”并将代码放在WordPress 样式表下方。这将覆盖 WordPress 的样式。