Question

所以，我以为我知道我的基本CSS，但我的大脑现在正在扭曲。我想在我的网站上实现960网格系统，但在此之前，我想完全理解代码的原理。

我有两个问题。首先，css调节柱的宽度。我们在左边有父类“.container”，在右边有两个类，其中“column”类是“one”和“two”类的后代选择器。如果它包含在“一个”和“容器”中，那么这个类“列”是40px宽吗？简单地说：我不太了解这三个要素之间的关系。

.container .one.column          { width: 40px;  }
.container .two.columns         { width: 100px; }

第二个问题：在HTML代码中调用类时，似乎是使用代码

完成的

<div class=one column>Content</div>

正确？但是没有标记为“一列”的类，只有后代选择器“列”标记为“一列”。我到底在哪里？非常感谢。

Answer 1

在HTML中，您可以将多个类应用于单个元素。但是上面的语法不正确;该值必须用引号括起来：

<div class="one column">Content</div>

如果没有引号，您最终会得到两个属性：class=one和column，这两个属性不同（并且HTML无效）。

HTML没有选择器的概念，因此它们之间的空间不是后代选择器，属性值本身也不是选择器。相反，空间只是一个分隔符，用于将它们区分为两个独立的类。

因此，要回答这两个问题，选择器.one.column将应用于具有这两个类的元素。

Answer 2

class属性没有任何类型的CSS处理，例如后代选择器。 class属性的值是要应用于元素的以空格分隔的类列表。所以div：

<div class="one column"></div>

有两个类one和column。

然后，CSS选择器.one.column适用于同时包含one和column类的元素。