css - 这个CSS3语法的名称是什么？

我问这个问题是因为我试图理解使此代码起作用的CSS3样式更改：Javascript CSS3: Move div container

快速提问，因为我不知道还有什么要问...下面叫什么？我想了解更多有关它的信息，但不确定它叫什么。

是className的“状态”部分是某种CSS3状态...还是其他？

<style>
  #className {
    position: relative;
    display: inline-block;
    height: 100px;
    transition: height 1s ease;
  }

  #className.state {
    height: 25px;
  }
</style>

最佳答案

这称为CSS选择器，此代码中没有CSS3特有的内容。

点（。）是class选择器。您可以有多个具有相同样式的元素，这就是您使用类名的地方。

哈希（＃）是id选择器。该选择器仅适用于单个元素。在大多数情况下，除非真正需要，否则应避免将id用于CSS选择器。这只是一个建议。

一个选择器接一个选择器，不带逗号（，）来选择特定元素内的元素。

在这种情况下

#className.state

选择ID state中名称为className的所有类。

编辑

鉴于HTML：

<div id="mobileMenuWrapper">
    <div class="hide">
        Content of the element
    </div>
</div>

以及以下CSS选择器：

#mobileMenuWrapper.hide{
    margin-top:0px;
}

将选择类名称为hide的元素。它将采用风格。其顶部的边距将为0。

但是，类似的事情是将多个类应用于signle元素。这是另一个故事。

<div class="mobileMenuWrapper hide"></div>

无论如何，因此要更好地了解所有内容，您仍然需要阅读this或this one之类的内容。至少要快速扫描。