Question

'＃'是ID选择器，是CSS语言的基础部分。它将HTML元素与给定的id匹配。我知道，但在.css文件中使用.classname {...}或#idselector之间的主要区别是什么。

.hello { color:000000;}

或

#hello { color:000000;}

Answer 1

第一个匹配任何带有CSS类hello的元素，第二个匹配任何id值为hello的元素。例如：

<div class="hello"></div>

<div id="hello"></div>

Answer 2

优先级。 ID具有比类选择器更高的优先级。如果您有以下CSS：

.hello { color:#000000;}
#hello { color:#ff0000;}

假设同一元素的ID为'hello'且类为'hello'，则该元素的字体颜色为红色，因为ID的优先级高于类选择器。

此外，页面上只能有一个ID为“hello”的元素。但是你可以使用'hello'类来拥有无限数量的元素。

Answer 3

ID（#hello）应仅用于唯一的单个元素（例如：登录按钮）。

类（.hello）应该用于可以重复的元素（例如：导航菜单按钮）。

Answer 4

ID是唯一的，某种元素可能只有一个ID，并且页面上只能存在一个相同的ID。所以以下内容无效：

<div id="first_id second_id"></div>
<div id="third_id"></div>
<div id="third_id"></div>

然而，类名恰恰相反。单个元素可能有多个类名，并且相同的类名可以在文档中多次出现。

ID的目的是表示网页的唯一部分（即标题，主要内容div，页脚）或内容的唯一部分（message-number-149632）。

类名的目的是描述多个相同的含义对象。（即对话框，帖子，菜单项）。

在CSS中，#id具有更高的特异性值，意味着以下内容：

<div id="id" class="class">Test</div>

#id { background: red; }
.class { background: green; }

将使div 红色，因为ID比类更具体。