如何取消CSS样式？为特定图片恢复默认样式的实现方法

有两种常用方式可以实现需求，根据你的实际场景选择就行：

方法一：用:not()选择器直接排除目标元素 #

这种方法最简洁，直接修改你原来的全局样式选择器，让它跳过特定的<picture>元素。

首先给你要排除的那张图片的<picture>标签加个自定义类，比如exclude-global-style：

<!-- 这张会应用你写的全局样式 -->
<picture>
  <!-- 图片内容 -->
</picture>

<!-- 这张会被排除，不应用全局样式 -->
<picture class="exclude-global-style">
  <!-- 图片内容 -->
</picture>

然后把原来的CSS改成下面这样，用:not()选择器过滤掉带这个类的元素：

picture:not(.exclude-global-style) {
    width:100%; 
    text-align:center; 
    display:inline-block; 
    padding-top:20px; 
    padding-bottom:20px; 
}

方法二：单独重置特定元素的样式 #

如果你不想修改原来的全局样式代码，可以给目标<picture>加个类或ID，然后把它的样式重置为默认值。

比如给目标元素加个IDspecial-picture：

<picture id="special-picture">
  <!-- 图片内容 -->
</picture>

然后写CSS重置这些属性：

#special-picture {
    width: unset; /* 恢复默认宽度 */
    text-align: unset; /* 恢复默认文本对齐 */
    display: unset; /* 恢复默认显示方式 */
    padding-top: 0; /* 重置上下内边距 */
    padding-bottom: 0;
}

用unset可以直接让属性回到浏览器默认值，也可以根据实际情况写具体的默认值（比如width: auto、display: inline之类的），效果差不多。

小提示： #

优先选方法一，因为它直接不让样式生效，比事后重置更高效；如果受限于不能修改原有全局样式，再用方法二。

内容的提问来源于stack exchange，提问作者MiscellaneousUser