我问这个问题是因为我试图理解使这段代码有效的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>
答案 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>
答案 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