html - 简单的CSS覆盖

Question

我有以下 CSS:

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

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

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

并尝试在我的 HTML 中使用它，例如:

<section class="wrapper extended">  

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

如何更正我的代码？

Answer 1

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

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

给 .wrapper .extended 意味着，你在 .wrapper 下选择一个子 .extended。提供 .wrapper.extended 是您正在选择同时具有 .wrapper 和 .extended 类的元素。希望清楚。