有什么区别.和#在css文件中？

Question

在css示例中,我看到规则定义从a .开始,有些开始于#- 有时这些规则混合在同一个文件中.这些规则有什么区别:

h1  { font-size:18pt;}
.new-alerts  { font-size:11pt; font-weight:bold;}
#old-alerts  { position:relative; font-size:10pt; }

它们在html页面上引用不同吗？它是如何继承属性的？

Answer 1

.是指一个阶级.<span class="one" />可以选择.one.

#是指ID.<span id="one" />可以选择#one.

当可能存在多个给定元素时,您应该使用类;当您知道只有一个元素时,您应该使用ID.#navigation-bar将使用ID,因为您的布局中只有一个导航栏,但.navigation-link会使用类名,因为您将有多个导航链接.(用它#navigation-bar a:link来获取导航链接会更好,但你明白我的意思.)

Answer 2

点.是一个类选择器,hash/pound/octothorpe # 由ID选择:

<style>
    .foo { ... }
    #bar { ... }
</style>
...
<p class='foo'>Foo</p>
<p id='bar' class='baz'>Bar</p>

ID必须在整个文档中是唯一的,类不必是.这基本上是主要区别.关于脚本有一些注意事项,但在造型时通常不会特别感兴趣.

此外,元素可能属于多个类:

<p class="foo bar baz">

如上所示,类和ID不是互斥的.