Question

我在向Wordpress小部件中的某些图像应用轮廓和阴影时遇到了问题。 “2017”主题添加了一些与我的冲突相关的相关规则，导致图像以白色垂直线代替边框出现，看起来会裁剪图像的右侧，以及顶部和底部边框和掉落阴影。如果我在Chrome DevTools中删除这些规则，问题就解决了。我不能简单地从主题中删除这些规则，因为我这样做是用户将添加到他们自己的网站的插件的一部分，所以我想更新我的CSS以修复问题而不修改底层主题。有没有办法做到这一点？

主题中的css（我可以在Chrome DevTools中删除以修复）是：

/* Fixes linked images */
.entry-content a img,
.widget a img {
    -webkit-box-shadow: 0 0 0 8px #fff;
    box-shadow: 0 0 0 8px #fff;
}

我试图在插件样式表中覆盖它：

.entry-content a img,
.widget a img {
    -webkit-box-shadow: none;
    box-shadow: none;
}

并将其作为内联CSS添加到'img'标记：

style="border:3px solid orange; box-shadow: 0px 2px 4px 1px #333; -webkit-box-shadow: 0px 2px 4px 1px #333;"

我也尝试将这个内联CSS添加到包含图像的'a'标记中：

style="-webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;"

然而，这没有效果。

有人可以帮忙吗？

Answer 1

CSS的规则（层叠样式表）如下：

更具体定义的规则将覆盖一般规则（例如，为div.entry-content指定的规则将覆盖为.entry-content指定的规则）
- 最后一个声明会覆盖所有其他声明（例如，style属性中的内联样式将覆盖外部样式表中声明的内容） - 谨慎使用此规则，因为它会让人感到困惑
- 将!important添加到您的媒体资源会覆盖其他声明 - 请谨慎使用此规则，因为它会让人感到困惑

所以答案是：

div.entry-content a img,
div.widget a img {
    -webkit-box-shadow: none;
    box-shadow: none;
}

OR：

.entry-content a img,
.widget a img {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Answer 2

感谢您的帮助！事实证明，主题中的CSS被应用于我试图应用边框和阴影的图像旁边的图像，所以我不得不覆盖该图像中的CSS，除了我正在尝试的那个修改。

因此，我必须将此应用于其他图像，并将其保留在＆＃39; a＆＃39;标记：

style="-webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;"

在Wordpress CSS中冲突的框阴影和边框样式

2 个答案: