2

我的博客模板的 CSS 为所有图像提供了一个圆形边框，以及其他一些更改：

article img {
    border-radius: 0.3em;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
    -moz-box-sizing: border-box;
    border: 0.5em solid rgb(255, 255, 255);
}

有些图像，我不希望应用此边框。现在，我有代码在应用我想要的实际设置之前“重置”这些设置：

img.smiley 
{
    /* RESET */
    border-radius: 0;
    box-shadow: none;
    -moz-box-sizing: content-box;
    border: 0px none;

    /* ACTUAL STYLE */
    top: 0px;
    position: relative;
}

它现在可以工作，但如果模板的创建者对模板进行任何更改，它会破坏我的图像，我需要向“重置”部分添加更多数据。

有没有更好的方法来做到这一点？也许某种说法“让smiley班级忽略它所知道的一切img，而只使用这种风格”？

4

1 回答 1

1

您可以使用:not选择器来定义初始样式。这会将样式应用于img除具有类.smiley...的元素之外的所有元素img:not(.smiley)。

展示这一点的 jsFiddle 示例

article img:not(.smiley) {
    border-radius: 0.3em;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
    -moz-box-sizing: border-box;
    border: 0.5em solid rgb(255, 255, 255);
}
于 2013-11-13T00:01:26.233 回答