删除CSS层次结构上的父样式

Question

我正在尝试覆盖css类，以便在小屏幕中查看时改进网站。这就是例如。

我的档案：

@media only screen and (max-width: 480px)
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;
}

核心档案：

.fp-roksprocket-showcase.rt-block {
margin: 0;
padding: 100px 0 80px 0;
}

这样，我想覆盖的DIV正在获取Core文件的填充... 为了成为我想要的方式，我无法将填充样式放在我的文件上。我需要“删除”这种风格！

我该怎么做？

Answer 1

如果你想删除填充： padding: 0

Answer 2

您正在寻找initial关键字。请检查MDN documentation。

initial关键字根据CSS规范将继承的样式重置为默认样式。但是，这仅支持CSS3，看起来您需要为 Internet Explorer 添加解决方法。

类似的unset关键字在浏览器兼容性方面更差，但可能更适合您想要的内容。

您可能还想查看this question以获取相关信息。

---

注意：这里的大多数答案都认为提问者想要删除填充。提问者想要做的是删除父样式（如果首先没有提到样式，则将填充恢复到浏览器将放置的内容）。

Answer 3

您的媒体查询中似乎缺少大括号。

你有：

@media only screen and (max-width: 480px)
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;
}

你应该拥有的是：

@media only screen and (max-width: 480px){
   body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
     margin: 0;
     padding: 0;
   }
}

我希望有所帮助。

Answer 4

更改：

@media only screen and (max-width: 480px)
    body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
    margin: 0;
}

到此：

@media only screen and (max-width: 480px)
    body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
        padding: 0;
    }
}

您忘了关闭选择器了。

Answer 5

如何发生CSS样式是所有子样式自动继承所有父样式，如果要覆盖任何父样式，则必须在子元素css样式中指定它。

假设我们有

.parent{color:red;}

然后所有子元素都将具有css样式color: red。如果要在子元素中覆盖它，那么 你必须在子元素css样式color:black

中指定

现在，在你的情况下，你的父样式有padding: 100px 0 80px 0;，如果你不想在孩子那里，那就做padding: 0px;

所以看起来应该是这样的

@media only screen and (max-width: 480px){
   body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
     margin: 0;padding :0;
   }
}