在 CSS 中，“.”之间有什么区别？和“#”在声明一组样式时？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/602168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In CSS what is the difference between "." and "#" when declaring a set of styles?
提问by Sam152
What is the difference between #and .when declaring a set of styles for an element and what are the semantics that come into play when deciding which one to use?
在为元素声明一组样式时，它们之间有什么区别，#以及.在决定使用哪个样式时会起作用的语义是什么？
回答by Paul Dixon
Yes, they are different...
是的，它们是不同的...
#is an id selector, used to target a singlespecific element with a unique id, but . is a class selectorused to target multipleelements with a particular class. To put it another way:
#是一个id 选择器，用于定位具有唯一 id的单个特定元素，但是 . 是一个类选择器，用于针对具有特定类的多个元素。换一种方式：
#foo {}will style the singleelement declared with an attributeid="foo".foo {}will style allelements with an attributeclass="foo"(you can have multiple classes assigned to an element too, just separate them with spaces, e.g.class="foo bar")
#foo {}将为使用属性声明的单个元素设置样式id="foo".foo {}将使用属性设置所有元素的样式class="foo"（您也可以将多个类分配给一个元素，只需将它们用空格分隔，例如class="foo bar"）
Typical uses
典型用途
Generally speaking, you use # for styling something you know is only going to appear once, for example, things like high level layout divs such sidebars, banner areas etc.
一般而言，您使用 # 来设置您知道只会出现一次的样式，例如，诸如侧边栏、横幅区域等高级布局 div 之类的东西。
Classes are used where the style is repeated, e.g. say you head a special form of header for error messages, you could create a style h1.error {}which would only apply to <h1 class="error">
在样式重复的地方使用类，例如，假设您使用一种特殊形式的错误消息标题，您可以创建一个h1.error {}仅适用于<h1 class="error">
Specificity
特异性
Another aspect where selectors differ is in their specificity - an id selector is deemed to be more specific than class selector. This means that where styles conflicton an element, the ones defined with the more specific selector will override less specific selectors. For example, given <div id="sidebar" class="box">any rules for #sidebarwith override conflicting rules for .box
选择器不同的另一个方面是它们的特异性 - id 选择器被认为比类选择器更具体。这意味着在元素上的样式冲突时，使用更具体的选择器定义的样式将覆盖不太具体的选择器。例如，给定<div id="sidebar" class="box">任何规则#sidebarwith 覆盖冲突规则.box
Learn more about CSS selectors
了解有关 CSS 选择器的更多信息
See Selectutorialfor more great primers on CSS selectors - they are incredibly powerful, and if your conception is simply that "# is used for DIVs" you'd do well to read up on exactly how to use CSS more effectively.
有关CSS 选择器的更多优秀入门书，请参阅Selectutorial- 它们非常强大，如果您的概念只是“# 用于 DIV”，那么您最好详细了解如何更有效地使用 CSS。
EDIT: Looks like Selectutorial might have gone to the big website in the sky, so try this archive linkinstead.
编辑：看起来 Selectutorial 可能已经访问了天空中的大网站，因此请尝试使用此存档链接。
回答by nickf
The #means that it matches the idof an element. The .signifies the class name:
该#意味着它相匹配的id元素的。该.表示的类名：
<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>
#myRedText {
color: red;
}
.blueText {
color: blue;
}
Note that in a HTML document, the id attribute must be unique, so if you have more than one element needing a specific style, you should use a class name.
请注意，在 HTML 文档中，id 属性必须是唯一的，因此如果您有多个元素需要特定样式，则应使用类名。
回答by tvanfosson
The dot(.) signifies a classname while the hash (#) signifies an element with a specific idattribute. The class will apply to any element decorated with that particular class, while the # style will only apply to the element with that particular id.
点( .) 表示类名，而散列( #) 表示具有特定id属性的元素。该类将适用于使用该特定类装饰的任何元素，而 # 样式仅适用于具有该特定 id 的元素。
Class name:
班级名称：
<style>
.class { ... }
</style>
<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>
Named element:
命名元素：
<style>
#name { ... }
</style>
<div id="name"></div>
回答by Jans Carton
It is also worth noting that in the cascade, an id(#) selector is more specificthan a b (.) selector. Therefore, rules in the id statement will override rules in the class statement.
还值得注意的是，在级联中，一个id( #) 选择器比 ab( ) 选择器更具体.。因此，id 语句中的规则将覆盖 class 语句中的规则。
For example, if both of the following statements:
例如，如果以下两个语句：
.headline {
color:red;
font-size: 3em;
}
#specials {
color:blue;
font-style: italic;
}
are applied to the same HTML element:
应用于相同的 HTML 元素：
<h1 id="specials" class="headline">Today's Specials</h1>
the color:bluerule would override the color:redrule.
在颜色：蓝色的规则将覆盖颜色：红色规则。
回答by Peter Boughton
A couple of quick extensions on what has already been said...
对已经说过的内容进行了一些快速扩展......
An idmust be unique, but you can use the same id to make different styles more specific.
Anid必须是唯一的，但您可以使用相同的 id 使不同的样式更加具体。
For example, given this HTML extract:
例如，给定这个 HTML 摘录：
<div id="sidebar">
<h2>Heading</h2>
<ul class="menu">
...
</ul>
</div>
<div id="content">
<h2>Heading</h2>
...
</div>
<div id="footer">
<ul class="menu">
...
</ul>
</div>
You could apply different styles with these:
您可以使用这些应用不同的样式：
#sidebar h2
{ ... }
#sidebar .menu
{ ... }
#content h2
{ ... }
#footer .menu
{ ... }
Another useful thing to know: you can have multiple classes on an element, by space-delimiting them...
另一个有用的知识：您可以在一个元素上有多个类，通过空格分隔它们......
<ul class="main menu">...</ul>
<ul class="other menu">...</ul>
Which allows you to have common styling in .menuwith specific styles using .main.menuand .sub.menu
这允许您.menu使用.main.menu和使用具有特定样式的通用样式.sub.menu
.menu
{ ... }
.main.menu
{ ... }
.other.menu
{ ... }
回答by Bobby Hyman
.classtargets the following element:
.class针对以下元素：
<div class="class"></div>
#classtargets the following element:
#class针对以下元素：
<div id="class"></div>
Note that the id MUST be unique throughout the document, whilst any number of elements may share a class.
请注意，id 在整个文档中必须是唯一的，而任意数量的元素可以共享一个类。
回答by Anders
Like pretty much everyone has stated already:
几乎每个人都已经说过：
A period (.) indicates a class, and a hash (#) indicates an ID.
句点 ( .) 表示一个类，一个哈希 ( #) 表示一个ID。
The fundamental difference between is that you can reuse a class on your page over and over, whereas an ID can be used once. That is, of course, if you are sticking to WC3 standards.
两者之间的根本区别在于，您可以在页面上一遍又一遍地重用类，而 ID 只能使用一次。也就是说，当然，如果您坚持 WC3 标准。
A page will still render if you have multiple elements with the same ID, but you will run into problems if/when you try to dynamically update said elements by calling them with their ID, since they are not unique.
如果您有多个具有相同 ID 的元素，页面仍然会呈现，但是如果/当您尝试通过使用它们的 ID 调用它们来动态更新所述元素时，您会遇到问题，因为它们不是唯一的。
It is also useful to note that ID properties will supersede class properties.
注意 ID 属性将取代类属性也很有用。
回答by tehvan
The # is an id selector. It matches only elements with a matching id. Next style rule will match the element that has an id attribute with a value of "green":
# 是一个 id 选择器。它只匹配具有匹配 id 的元素。下一个样式规则将匹配具有值为“green”的 id 属性的元素：
#green {color: green}
See http://www.w3schools.com/css/css_syntax.aspfor more information
回答by Peter Gruppelaar
Here is my aproach of explaining te rules .styleand #styleare part of a matrix.
that if not in the right order, they can override each other, or cause conflicts.
这是我解释规则的方法，.style并且#style是矩阵的一部分。如果顺序不正确，它们可能会相互覆盖，或引起冲突。
Here is the line up.
这是排队。
Matrix
矩阵
#style 0,0,1,0 id
.style 0,1,0,0 class
if you want override these two you can use <style></style>witch has a matrix level or 1,0,0,0.And @media query's will override everything above...
I am not sure about this but i think the ID selector #can only be used once in a page.
如果你想覆盖这两个你可以使用<style></style>女巫有一个矩阵级别或者1,0,0,0.@media 查询将覆盖上面的所有内容......我不确定这一点，但我认为 ID 选择器#只能在一个页面中使用一次。
