HTML/CSS 嵌套混淆

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 种不同的可能性*:

1. 平面 HTML/平面 CSS
2. 平面 HTML/嵌套 CSS
3. 嵌套 HTML/平面 CSS
4. 嵌套 HTML/嵌套 CSS

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

有人介意向我解释一下使用每种可能性的后果以及应该在什么时候使用哪种吗？

谢谢。

时钟

Answer 1

在您的第一个 HTML/CSS 示例中，您在 3 个元素上使用了 3 个类，您显然理解这一点。

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

在您的第二个 CSS 中，您使用的是“child of”符号 - 所以:

.parent .child

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

此页面提供了很好的示例:http://css-tricks.com/multiple-class-id-selectors/