Question

我博客模板的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的所有内容，而只使用这种风格”？

Answer 1

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

jsFiddle example展示了这个

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

如何防止特定元素具有与其他元素相同的样式

1 个答案: