在CSS中声明一组样式时，“。”和“＃”之间的区别是什么？
“＃”和“。”之间的区别是什么？ 当为一个元素声明一组样式，以及当决定使用哪一个时，什么是语义。
是的，他们是不同的…
#是一个idselect器 ，用来定位一个具有唯一id的特定元素，但是。 是一个类select器，用于将多个元素定位到一个特定的类。 换一种方式：
-
#foo {}将使用属性id="foo"声明单个元素 -
.foo {}将使用属性class="foo"所有元素进行样式设置（也可以将多个类分配给一个元素，只需用空格将它们分开，例如class="foo bar"）
典型用途
一般来说，你使用＃来devise一些你知道只会出现一次的东西，比如高层布局的东西，例如侧边栏，横幅区域等等。
类被用在风格重复的地方，比如说，如果你为错误信息提供了一个特殊的头部forms，你可以创build一个风格h1.error {} ，它只适用于<h1 class="error">
特异性
select器不同的另一个方面是它们的特性 – 一个idselect器被认为比classselect器更具体。 这意味着，如果样式在元素上发生冲突 ，那么使用更具体的select器定义的样式将覆盖较不具体的select器。 例如，给定<div id="sidebar" class="box"> #sidebar任何规则，覆盖与.box冲突的规则
了解关于CSSselect器的更多信息
请参阅Selectutorial以获取更多有关CSSselect器的优秀的底层引用 – 它们非常强大，如果您的概念仅仅是“＃用于DIV”，那么您最好仔细阅读如何更有效地使用CSS。
#表示它匹配一个元素的id 。 的. 表示class级名称：
<div id="myRedText">This will be red.</div> <div class="blueText">this will be blue.</div> #myRedText { color: red; } .blueText { color: blue; }
请注意，在HTML文档中， id属性必须是唯一的 ，所以如果您有多个元素需要特定样式，则应该使用类名称。
点表示类名，而＃表示具有特定id属性的元素。 该类将应用于用该特定类装饰的任何元素，而＃样式将仅应用于具有该特定id的元素。
class级名称：
<style> .class { ... } </style> <div class="class"></div> <span class="class></span> <a href="..." class="class">...</a>
命名的元素：
<style> #name { ... } </style> <div id="name"></div>
值得注意的是，在级联中 ，一个id（＃）select符比class（。）select符更具体 。 因此，id语句中的规则将会覆盖类声明中的规则。
例如，如果两个以下语句：
.headline { color:red; font-size: 3em; } #specials { color:blue; font-style: italic; }
应用于相同的HTML元素：
<h1 id="specials" class="headline">Today's Specials</h1>
颜色：蓝色规则将覆盖颜色：红色规则。
关于已经说过的一些快速扩展…
一个id必须是唯一的，但是你可以使用相同的ID来使不同的样式更具体。
例如，给出这个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>
你可以应用这些不同的风格：
#sidebar h2 { ... } #sidebar .menu { ... } #content h2 { ... } #footer .menu { ... }
另一个有用的东西要知道：你可以有一个元素的多个类，通过空格分隔它们…
<ul class="main menu">...</ul> <ul class="other menu">...</ul>
这使您可以在.menu使用.main.menu和.sub.menu具有特定样式的常用样式
.menu { ... } .main.menu { ... } .other.menu { ... }
就像大家已经说过的那样：
句点（“。”）表示一个类，而散列（“＃”）表示一个ID。
两者之间的根本区别在于，您可以一遍又一遍地在页面上重用一个类，而一个ID可以使用一次。 当然，如果你坚持WC3标准的话。
如果有多个具有相同ID的元素，页面仍然会呈现，但如果您尝试通过调用ID来dynamic更新所述元素，则会遇到问题，因为它们不是唯一的。
注意ID属性将取代类属性也是有用的。
.class目标是以下元素：
<div class="class"></div>
#class目标是以下元素：
<div id="class"></div>
请注意，id在整个文档中必须是唯一的，而任何数量的元素可以共享一个类。
＃是一个idselect器。 它仅匹配具有匹配的id的元素。 下一个样式规则将匹配具有值为“绿色”的id属性的元素：
#green {color: green}
这是我解释te规则的方法.style和#style是matrix的一部分。 如果不是以正确的顺序，他们可以相互覆盖，或导致冲突。
这是排队。
matrix
#style 0,0,1,0 id .style 0,1,0,0 class
如果你想覆盖这两个你可以使用<style></style>女巫有一个matrix级别或1,0,0,0. 而@media查询将覆盖上面的一切…我不知道这个，但我认为IDselect器#只能在页面中使用一次。
