在 CSS 中，“.”有啥区别？和“#”声明一组样式时？ [复制]

Posted 2023-03-06

【中文标题】在 CSS 中，“.”有啥区别？和“#”声明一组样式时？ [复制]

【英文标题】：In CSS what is the difference between "." and "#" when declaring a set of styles? [duplicate]在 CSS 中，“.”有什么区别？和“#”声明一组样式时？ [复制]

【发布时间】：2010-10-10 18:31:05

【问题描述】：

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

【参考方案1】：

是的，它们是不同的……

# 是一个id selector，用于定位具有唯一 id 的 single 特定元素，但是 .是一个class selector，用于定位具有特定类的多个元素。换句话说：

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

典型用途

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

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

特异性

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

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

请参阅Selectutorial 了解更多关于 CSS 选择器的优秀入门 - 它们非常强大，如果您的概念只是“# 用于 DIV”，那么您最好阅读一下如何更有效地使用 CSS .

编辑：看起来 Selectutorial 可能已经访问了天空中的大网站，所以试试这个 archive link。

【讨论】：

我相信，如果您（无效地）指定多个具有相同 ID 的元素，大多数浏览器都会将带有 ID 选择器的规则应用于所有这些元素。

@Miles 是正确的 - 我认为 /#/ 以“ID”属性为目标，而 /./ 以“类”为目标更准确。虽然 ID应该是唯一的，但 CSS 引擎不会验证或关心这一点。

@Rex M - 虽然给定一个元素，但无论它是否唯一，它都不能有多个 id，这很有用。我在 Firefox 下尝试了这个，并且忽略了具有两个 id 的元素。然而，元素可以有多个类。

div.sidebar 和 div #sidebar 一样吗？

选择链接不好:(

【参考方案2】：

点 (.) 表示 类 名称，而哈希 (#) 表示具有特定 id 属性的元素。该类将应用于使用该特定类装饰的任何元素，而 # 样式将仅应用于具有该特定 id 的元素。

类名：

<style>
   .class  ... 
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

命名元素：

<style>
   #name  ... 
</style>

<div id="name"></div>

【讨论】：

“命名元素”具有误导性

@Bobby -- 那么当你给一个元素一个 id 时你怎么称呼它 -- 'id-ing' 呢？

我同意 Bobby 的观点 - 元素可以有名称也可以有 id。你怎么称呼这些元素？

【参考方案3】：

还值得注意的是，在cascade 中，id (#) 选择器比 b (.) 选择器更多 specific。所以id语句中的规则会覆盖class语句中的规则。

例如，如果以下两个语句：

.headline 
  color:red;
  font-size: 3em;


#specials 
  color:blue;
  font-style: italic;

应用于相同的 html 元素：

<h1 id="specials" class="headline">Today's Specials</h1>

color:blue 规则将覆盖 color:red 规则。

【参考方案4】：

就像几乎每个人都已经说过的那样：

句点 (.) 表示 类，哈希 (#) 表示 ID。

两者之间的根本区别在于，您可以在页面上反复重用一个类，而 ID 只能使用一次。当然，前提是您要遵守 WC3 标准。

如果您有多个具有相同 ID 的元素，页面仍会呈现，但如果/当您尝试通过使用其 ID 调用这些元素来动态更新所述元素时，您会遇到问题，因为它们不是唯一的。

注意 ID 属性将取代类属性也很有用。

【参考方案5】：

这是我解释规则.style 和#style 是矩阵的一部分的方法。 如果顺序不正确，它们可能会相互覆盖，或引起冲突。

这是排队。

矩阵

#style 0,0,1,0 id

.style 0,1,0,0 class

如果你想覆盖这两个你可以使用<style></style> 女巫有一个矩阵级别或1,0,0,0. 而@media 查询将覆盖上面的所有内容...... 我不确定这一点，但我认为 ID 选择器# 只能在一个页面中使用一次。

【参考方案6】：

对已经说过的内容进行一些快速扩展...

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
 ... 

【参考方案7】：

.class 定位以下元素：

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

#class 定位以下元素：

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

请注意，id 在整个文档中必须是唯一的，而任意数量的元素可以共享一个类。

【参考方案8】：

# 是一个 id 选择器。它仅匹配具有匹配 id 的元素。 下一个样式规则将匹配 id 属性值为“green”的元素：

#green color: green

更多信息请参见http://www.w3schools.com/css/css_syntax.asp

【参考方案9】：

# 表示它与元素的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 属性必须是唯一的，因此如果有多个元素需要特定样式，则应使用类名。