Question

我正在试图弄清楚CSS文件中的类是如何工作的。以下是3个示例类：

container
inner_content
text_section

以下是我在CSS中列出的三种方式：

.container.inner_content.text_section { - 这个类之间没有空格。

.container .inner_content .text_section { - 这个类别之间有空格。

.container li.inner_content - 这个li被抛入其中。

我想要找出的是，在类之间有空格或没有空格之间有什么区别。此外，当li或div之类的内容位于类的中间时，它是否告诉浏览器仅在li或div使用该类时才使用该类不是为了别的吗？

Answer 1

在你的第一个例子中：

.container.inner_content.text_section

匹配具有所有三个类的任何元素

.container.inner_content.text_section {
  color: red;
}

<div class="container inner_content">one class</div>
<div class="container inner_content">two classes</div>
<div class="container inner_content text_section">all three classes</div>

你的第二个例子完全不同：

.container .inner_content .text_section

将任何元素后代的元素与类.container匹配，并将元素的后代与类.inner_content匹配（即：子项，或子项的子项等）：

.container .inner_content .text_section {
  color: red;
}

<div class="container">
  not this
  <div class="inner_content">
    not this
    <div class="text_section">child</div>
  </div>
</div>

在你的上一个例子中：

.container li.inner_content

匹配具有类li的{{1}}元素，并且是具有类inner_content的元素的子元素（假设.container元素）：

ul

.container li.inner_content {
  color: red;
}

类如何在CSS文件中工作？

1 个答案: