简单的css覆盖

Question

我有以下css：

.wrapper {
    display: inline-block;
    margin-top: 60px;
    padding: 15px;
    width: 100%;
}

我想创建另一个继承所有 wrapper 属性并覆盖width属性的类：

.wrapper .extended {
    width: 150% !important;
}

并尝试在我的HTML中使用它：

<section class="wrapper extended">  

但不幸的是，这不起作用。

如何更正我的代码？

Answer 1

它们是同一元素的两类。删除空格：

.wrapper.extended {
    width: 150% !important;
}

给予.wrapper .extended表示您在.extended下选择了一个.wrapper个孩子。给.wrapper.extended您正在选择包含.wrapper和.extended类的元素。希望很清楚。

Answer 2

删除.wrapper .extended类

之间的空格

.wrapper.extended {
    width: 150% !important;
}

css selectors

Answer 3

您无法在这两个类之间添加空格。 .wrapper.extended { width: 150% !important; }

它将被视为它的子元素，但事实并非如此。使用此

{{1}}

Answer 4

删除.wrapper .extended类

之间的空格

请添加此方法.wrapper.extended

和css这样：

.wrapper.extended {
    width: 150% !important;
}

希望很清楚。