html - .class vs #id：有什么区别/何时使用？

Question

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

.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 中，an#id具有更高的特异性值，这意味着：

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

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

将使 div red，因为 ID 比 class 更具体。