这个CSS3语法的名称是什么?

时间:2014-11-08 15:40:15

标签: 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>

4 个答案:

答案 0 :(得分:2)

这称为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>

无论如何,为了更好地了解所有内容,您仍然需要阅读thisthis one之类的内容。至少快速扫描一下。

答案 1 :(得分:1)

它必须是一个类名。例如,你可以让一个带有Id的项目仅设置一个项目的样式,但你想要一些与其他元素相同的样式

答案 2 :(得分:1)

是的,它被称为一个班级。类是适用于多个元素的规则,而id仅适用于特定元素。

类选择器如下所示:。

ID选择器如下所示:#

输入元素可以具有特定的ID:<input type"text" id="monthly_cost"/>

请注意,其他任何元素都不能具有相同的ID。它会导致HTML错误。

对于多个元素,您使用类选择器:<h1 class="blue_heading">

希望这有帮助!

答案 3 :(得分:0)

它叫做CSS Selector。 您可以在此处阅读:http://www.w3schools.com/cssref/css_selectors.asp