Question

我在Wordpress CSS主题中有以下选择器，我被建议不要由主题创建者编辑：

.entry img, img.thumbnail {
  margin-bottom: 10px;
  padding: 2px;
  border: 1px solid #DDD;
  background: white;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

所以我在辅助CSS中添加了这个以试图'取消'上面的CSS选择器的效果：

.entry img, img.thumbnail { 
    margin-bottom: 0px; 
    padding: 0px; 
    border: 0px; 
    background: #fff;  
    -moz-box-shadow: 0;
    -webkit-box-shadow: 0;
    box-shadow: 0;
}

然而，它似乎没有任何改变。 我不确定在上面的代码段中我需要编辑什么。

当我在Google Chromes检查器中手动取消选中以下选项时，我试图摆脱的边框确实消失了：

-moz-箱阴影
-webkit-箱阴影
箱阴影

Answer 1

我对每个CSS规则都很重要，或者你可以添加包装div并在css中使用它。

喜欢

HTML

<div id="wraper_div">
<div class="your_class"></div>
</div>

CSS：

#wraper_div .your_class{
/*CSS PROPERTY*/
}

Answer 2

使用无代替0修复此问题。 CSS样式的顺序也很重要，请确保将这些样式放在CSS的底部。

Working DEMO

.entry img, img.thumbnail { 
    margin-bottom: 0px; 
    padding: 0px; 
    border: 0px; 
    background: #fff;  
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Answer 3

如果您检查Chrome中的元素，您的规则是否会在默认值之后应用？

如果是这样，你可以尝试添加！important来覆盖它。

.entry img, img.thumbnail { 
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Answer 4

第一

阴影应设置为无

2

后台应该没有简短的重置，因为IE有通过速记重置的问题

尝试

background-color:#fff

而不是

background:#fff

3

有一种叫做“特殊性”的东西。

您的代码与它覆盖的代码具有相同的特定性，因此它需要低于它覆盖的代码，或者具有更高的特定性。

尝试使用另一个选择器来定位代码：

.entry img, img.thumbnail

更高的特殊性：

body .entry img, body img.thumbnail

规则是指css规则的“权限”。不同的选择器具有不同的“重量”。

ID的权重为100，类10，元素选择器1。

.entry img, img.thumbnail

第一个声明有11个，第二个声明有10个。在两者前面添加正文以赋予它们+1特定性，因此它们会覆盖旧代码。

5

如果您想支持旧的IE，请松开img.thumbnail，它可能会导致IE出现问题，仅替换为.thumbnail。如果没有其他元素与类.thumbnail然后img元素，你可以这样做。

希望有所帮助。

如何重置此特定的CSS选择器

4 个答案: