In css examples, I've seen rules defined starting with a .
and some starting with #
- sometimes these are mixed in the same file. What is the difference between these rules:
在css示例中,我看到了以a开头的规则。有些以#开头,有时它们混合在同一个文件中。这些规则之间的区别是什么?
h1 { font-size:18pt;}
.new-alerts { font-size:11pt; font-weight:bold;}
#old-alerts { position:relative; font-size:10pt; }
Are they referenced differently on the html page? Is it how the properties are inherited?
它们在html页面上有不同的引用吗?属性是如何继承的?
4 个解决方案
#1
37
.
refers to a class. <span class="one" />
could be selected with .one
.
。是指一个类。可以用. 1来选择。
#
refers to an ID. <span id="one" />
could be selected with #one
.
#是指一个ID。可以用# 1来选择。
You should be using classes when there could be more than one of a given element, and IDs when you know there will only be one. #navigation-bar
would be using an ID because you will only have one navigation bar in your layout, but .navigation-link
would be using a class name because you will have multiple navigation links. (It'd be better practice to use #navigation-bar a:link
to get the navigation links, but you get my point.)
当给定元素中可能有多个元素时,应该使用类;当知道只有一个元素时,应该使用id。# navig-bar将使用一个ID,因为你的布局中只有一个导航条,而. navig-link将使用一个类名,因为你将有多个导航链接。(最好使用# navigationbar a:link获取导航链接,但你明白我的意思了。)
#2
10
The dot .
is a class selector, the hash/pound/octothorpe #
selects by an ID:
点。是一个类选择器,由ID选择的散列/磅/十月号:
<style>
.foo { ... }
#bar { ... }
</style>
...
<p class='foo'>Foo</p>
<p id='bar' class='baz'>Bar</p>
IDs have to be unique throughout a document, classes don't have to be. That's basically the primary difference. There are some things to note with regard to scripting but those are usually not of particular interest when styling.
id必须在整个文档中是唯一的,类不必是唯一的。这是最基本的区别。在编写脚本时需要注意一些事情,但在样式化时通常不是特别感兴趣的。
Furthermore, an element may belong to multiple classes:
此外,一个元素可能属于多个类:
<p class="foo bar baz">
and as seen above, classes and IDs are not mutually exclusive.
如上所述,类和id并不是相互排斥的。
#3
2
. is a class and can be reused many times and for different elements
。一个类是否可以被重用很多次并用于不同的元素
# is an ID and must be used only once on each page.
#是一个ID,必须在每个页面上只使用一次。
#1
37
.
refers to a class. <span class="one" />
could be selected with .one
.
。是指一个类。可以用. 1来选择。
#
refers to an ID. <span id="one" />
could be selected with #one
.
#是指一个ID。可以用# 1来选择。
You should be using classes when there could be more than one of a given element, and IDs when you know there will only be one. #navigation-bar
would be using an ID because you will only have one navigation bar in your layout, but .navigation-link
would be using a class name because you will have multiple navigation links. (It'd be better practice to use #navigation-bar a:link
to get the navigation links, but you get my point.)
当给定元素中可能有多个元素时,应该使用类;当知道只有一个元素时,应该使用id。# navig-bar将使用一个ID,因为你的布局中只有一个导航条,而. navig-link将使用一个类名,因为你将有多个导航链接。(最好使用# navigationbar a:link获取导航链接,但你明白我的意思了。)
#2
10
The dot .
is a class selector, the hash/pound/octothorpe #
selects by an ID:
点。是一个类选择器,由ID选择的散列/磅/十月号:
<style>
.foo { ... }
#bar { ... }
</style>
...
<p class='foo'>Foo</p>
<p id='bar' class='baz'>Bar</p>
IDs have to be unique throughout a document, classes don't have to be. That's basically the primary difference. There are some things to note with regard to scripting but those are usually not of particular interest when styling.
id必须在整个文档中是唯一的,类不必是唯一的。这是最基本的区别。在编写脚本时需要注意一些事情,但在样式化时通常不是特别感兴趣的。
Furthermore, an element may belong to multiple classes:
此外,一个元素可能属于多个类:
<p class="foo bar baz">
and as seen above, classes and IDs are not mutually exclusive.
如上所述,类和id并不是相互排斥的。
#3
2
. is a class and can be reused many times and for different elements
。一个类是否可以被重用很多次并用于不同的元素
# is an ID and must be used only once on each page.
#是一个ID,必须在每个页面上只使用一次。