【发布时间】：2013-02-20 17:38:36
【问题描述】：
过去几天我一直在学习 CSS，并且一直想知道声明标头时 . 或 # 有什么不同。示例：
.test
{
some stuff here
}
#test
{
Some stuff here
}
. 和# 之间的主要区别是什么？
【问题讨论】：
标签： css
【发布时间】：2013-02-20 17:38:36
【问题描述】：
# 是一个 ID 选择器。 . 是一个类选择器。这就像将精密镊子与铲子进行比较。
页面上只能有一个具有给定 ID 的元素，因此 # 选择器的优先级远高于类。
【讨论】：
-
+1 用于提及优先级，但可能有助于解释这是什么？另外，我不确定我是否得到您的精密镊子/铲子类比。我的意思是，我知道当你使用铲子时你会捡起更多的东西，但我不认为课程缺乏精确度。
. -> 这指的是一个类的 css
它用于为在该名称中设置了类的元素指定 css。
多个元素可以有同一个类
例如
<div class='xyz'></div>
<div class='xyz'></div>
<div class='xyz'></div>
通过写作
.xyz
{
width:100px;
height:100px;
}
我们可以为所有这些 div 设置共同的宽度高度
# 指的是ID
ID 是唯一的
html页面中只有一个元素可以有ID
它用于应用与一个特定元素有关的 CSS 属性
例如
<div id="div1" class='xyz'></div>
<div id="div2" class='xyz'></div>
<div class='xyz'></div>
通过写作
.xyz
{
width:100px;
height:100px;
}
#div1
{
width:200px;
}
我们将 div1 的宽度设为 200！
带有# 的CSS 属性比. 具有更高的优先级
> 即
#css 将覆盖.Css
看看这个例子 jsfiddle http://jsfiddle.net/rbyKx/
【讨论】：
.test {...} 选择指定类的元素。 #test {...} 选择具有指定 ID 的元素。 （给定 ID 的元素不应超过一个）
【讨论】：
.test 将应用于包含类 test 的元素，#test 将应用于包含 id test 的元素
【讨论】：
这是针对一般 CSS 的，并非特定于 CSS3。
使用# 将通过id 属性选择HTML 元素（注意ids 在页面上必须是唯一的）。
使用. 将通过class 属性选择HTML 元素，并将选择其类列表中包含您的CSS 中指定的类的元素。
CSS 选择器还有一个优先级“分数”来确定哪些规则胜过其他规则。由于ids 是唯一的，它们的得分远高于class 选择器，因此优先级更高。
您可以阅读有关 CSS 选择器的更多信息 here。
【讨论】：
这只是普通的 CSS 而不是 CSS3。
.test 表示定位任何具有 class test 的元素，例如
<div class="test">I am targeted</div>
<div class="testnot">I am not targeted</div>
#test 表示目标 元素 具有 id test，例如
<div id="test">I am targeted</div>
<div id="testnot">I am not targeted</div>
ID 必须是唯一的，许多元素可以包含同一个类。
【讨论】：
. 用于类，# 用于 id。
所以
您在 .test { } 规则中定义的样式将适用于 class _test_ 的任何元素，例如：
<div class="test"></div>
您在#test { } 规则中定义的样式将应用于将 test 作为 id 的元素。例如：
<div id="test"></div>
【讨论】：
. 是 class 和 # 是 id
ID 是唯一的
每个元素只能有一个ID
每个页面只能有一个具有该 ID 的元素
类不是唯一的
你可以在多个元素上使用同一个类。
你可以在同一个元素上使用多个类。
这就是主要区别
你可以举个BAR CODE和SERIAL NUMBER的例子
产品 {class} 的条形码相同 并且序列号对于产品 {id} 的每个实例都不同
【讨论】：
点用于类，哈希 (#) 用于 ID。类被定义为各种节元素的样式，并且可以多次使用。
ID 基本上用于定义页面的特定部分。它们只能使用一次。
类示例如果我想设置页面上每个段落的字体大小，您可以使用类执行以下操作：
p.font-size{
font-size:12px;
}
Id 示例：如果我必须更改特定 para 的字体大小，我可以使用以下方式：
#Size {
font-size:10px;
}
而不是以这种方式在 html 中使用它
<p id="Size">your para</p>
这里的id会覆盖css类中定义的任何样式
【讨论】：