覆盖默认CSS属性

时间:2013-10-28 00:10:21

标签: css

我确实有一个带有默认输入CSS的wordpress主题。

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;
}

我想在特定的div中覆盖输入样式,例如'text'和'submit'。

示例HTML:

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

我正在尝试这个CSS。但他们不会工作..

.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;
}

当我做inpect元素。浏览器仍然会检测主题的默认输入样式。

2 个答案:

答案 0 :(得分:3)

在wordpress主题中它有“border:none!important;” !important意味着它不会被具有更高优先级的样式覆盖。

您可以删除它来修复它,但它可能会破坏页面上的其他内容(重要的是有点脏,在大多数情况下不是很好的做法,所以它可能是出于某种原因使用)

答案 1 :(得分:0)

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