0

我在 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 Chrome 检查器中手动取消选中以下选项时，我试图摆脱的边框确实消失了：

  • -moz-box-shadow
  • -webkit-box-shadow
  • 盒子阴影
4

4 回答 4

1

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

喜欢

HTML

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

CSS：

#wraper_div .your_class{
/*CSS PROPERTY*/
}
于 2012-11-30T11:46:58.393 回答
0

第一

阴影应设置为无

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 个。在两者前面添加 body 以使它们具有 +1 特异性，因此它们会覆盖旧代码。

5.

如果您关心支持旧版 IE，请松开 img.thumbnail，这可能会导致 IE 出现问题，请仅替换为 .thumbnail。如果没有其他具有类 .thumbnail 的元素，则可以执行此操作，然后是 img 元素。

希望有帮助。

于 2012-11-30T11:27:53.277 回答
0

使用none而不是 0 解决了这个问题。CSS 样式的顺序也很重要，确保将这些样式放在 CSS 的底部。

工作演示

.entry img, img.thumbnail { 
    margin-bottom: 0px; 
    padding: 0px; 
    border: 0px; 
    background: #fff;  
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
于 2012-11-30T11:16:39.700 回答
0

如果您检查例如 Chrome 中的元素，您的规则是否适用于默认规则？

如果是这样，您可以尝试将 !important 添加到它以覆盖。

.entry img, img.thumbnail { 
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
于 2012-11-30T11:17:30.597 回答