Question

我知道之前可能已经问过这个问题，这也是一个通用的问题所以我希望我不会被抨击...

我有一个关于HTML / CSS和嵌套的一般问题。我一直试图了解它是如何工作的，但我还没有发现任何能让我清楚的网站。所以我希望有人可以提供帮助。

我试图了解CSS嵌套的工作原理。

假设我有以下CSS：

.parent {
    background-color: red;
}
.child {
    background-color: green;
}
.grandchild {
    background-color: blue;
}

和我的以下HTML：

<div class="parent">
    <div class="child">
        <div class="grandchild"></div>
    </div>
</div>

当我测试它时，它看起来像我期望的那样。

让我感到困惑的是，我看到了一些示例网站，他们定义HTML如下：

<div class="parent">
    <div class="parent child">
        <div class="parent child grandchild"></div>
    </div>
</div>

第一个HTML和第二个HTML有什么区别？鉴于第二个HTML，我是否必须将CSS更改为以下内容：

.parent {
    background-color: red;
}
.parent .child {
    background-color: green;
}
.parent .child .grandchild {
    background-color: blue;
}

或者，如果我使用上面的嵌套CSS和第一个HTML（没有嵌套）怎么办？

因此，使用HTML / CSS嵌套时有4种不同的可能性*：

*原谅我使用的术语嵌套和扁平如果不正确，我不知道正式名称。

有人会介意向我解释使用每种可能性的后果以及何时应该使用哪种？

谢谢。

时钟

Answer 1

这只是具有多个类的元素。这很好。

<div class="parent">
    <div class="parent child">
        <div class="parent child grandchild"></div>
    </div>
</div>

重要的是css的级联。像这个孙子优先于孩子，孩子优先于父母。

.parent {
    background-color: red;
}
.child {
    background-color: green;
}
.grandchild {
    background-color: blue;
}

这个父母优先于孙子，孙子优先于孩子。

.child {
    background-color: green;
}
.grandchild {
    background-color: blue;
}
.parent {
    background-color: red;
}

css中的

Precedence表示css中的较低者选择器或属性位于文件/样式中，它将在显示中具有优先权。

如果您在单个元素上使用多个类，则可以使用多个选择器来应用有助于reusing code的样式。

另请查看inheritance。

Answer 2

在您的第一个HTML / CSS示例中，您有3个元素使用3个类，您显然可以理解。

在你的第二个HTML中，你将多个类应用于第二个两个div元素，没有比这更复杂的了。然后，如果多个类为同一属性指定不同的值，则应用CSS规则来应用哪些属性。

在你的第二个CSS中你正在使用＆＃34;孩子的＆＃34;符号 - 所以：

.parent .child

意味着当你将.child应用于一个元素时，它只会影响该元素，如果它是.parent的子元素