250

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

4

9 回答 9

373

是的，他们不一样……

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

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

典型用途

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

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

特异性

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

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

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

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

于 2009-03-02T12:38:13.940 回答
32

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

于 2009-03-02T12:40:09.287 回答
10

dot( .) 表示类名，而 hash( #) 表示具有特定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>
于 2009-03-02T12:38:00.633 回答
8

还值得注意的是，在cascade中，id ( ) 选择器比 ab( ) 选择#器更具体.。因此，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规则。

于 2009-03-02T18:26:59.687 回答
7

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

Anid必须是唯一的，但是您可以使用相同的 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
{ ... }
于 2009-03-02T14:25:27.927 回答
5

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

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

两者的根本区别在于您可以在页面上反复重用一个类，而一个 ID 可以使用一次。当然，如果你坚持 WC3 标准的话。

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

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

于 2009-03-02T18:37:14.250 回答
4

.class针对以下元素：

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

#class针对以下元素：

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

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

于 2009-03-02T12:40:40.627 回答
2

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

#green {color: green}

有关详细信息，请参阅http://www.w3schools.com/css/css_syntax.asp

于 2009-03-02T12:40:35.510 回答
-2

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

这里是排队。

矩阵

#style 0,0,1,0 id

.style 0,1,0,0 class

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

于 2015-05-20T07:25:11.880 回答