在 CSS 中，“.”有什么区别？和“#”声明一组样式时？

Question

在声明元素的一组样式时， # 和 . 之间有什么区别，以及在决定使用哪个样式时发挥作用的语义是什么？

原文由 Sam152 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，他们不一样……

# 是一个 id 选择器，用于定位具有唯一 id 的 单个 特定元素，但是 .是一个 类选择器，用于定位具有特定类的 多个 元素。换一种方式：

• #foo {} 将为使用属性声明的 单个 元素设置样式 id="foo"
• .foo {} 将使用属性设置 所有 元素的样式 class="foo" （您也可以为一个元素分配多个类，只需用空格分隔它们，例如 class="foo bar" ）

典型用途

一般来说，您使用# 来设置您知道只会出现一次的东西，例如，诸如侧边栏、横幅区域等高级布局 div 之类的东西。

在样式重复的地方使用类，例如，假设您使用特殊形式的错误消息标题，您可以创建一个样式 h1.error {} 仅适用于 <h1 class="error">

特异性

选择器不同的另一个方面是它们的特异性 - id 选择器被认为比类选择器更具体。这意味着当元素上的样式 发生冲突 时，使用更具体的选择器定义的样式将覆盖不太具体的选择器。例如，给定 <div id="sidebar" class="box"> 的任何规则，并覆盖 .box #sidebar 的冲突规则

了解有关 CSS 选择器的更多信息

有关 CSS 选择器的更多精彩入门，请参阅 Selectutorial - 它们非常强大，如果您的概念只是“# 用于 DIV”，那么您最好仔细阅读如何更有效地使用 CSS。

编辑：看起来 Selectutorial 可能已经去了天空中的大网站，所以试试这个 存档链接。

原文由 Paul Dixon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

# 表示它匹配元素的 id 。 . 表示类名：

 <div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>

#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

请注意，在 HTML 文档中， id 属性必须是唯一的，因此如果您有多个元素需要特定样式，则应使用类名。

原文由 nickf 发布，翻译遵循 CC BY-SA 2.5 许可协议