在CSS中,“。”有什么区别 和“#”声明一组样式时?


217

是什么区别#,并.宣布一组样式时的元素,什么是决定使用哪一个时发挥作用的语义?

Answers:


336

是的,它们是不同的...

#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选择器的更多入门知识,请参见选件指南-它们功能强大,如果您的概念只是“#用于DIV”,那么您最好阅读一下如何更有效地使用CSS。

编辑:看起来选录可能已经去了天空中的大网站,所以尝试此存档链接


2
我相信,如果您(无效)指定具有相同ID的多个元素,则大多数浏览器都会将具有ID选择器的规则应用于所有这些元素。
英里

1
@Miles是正确的-我认为将/#/定位为“ ID”属性,将/./定位为“类”更为准确。尽管ID 应该是唯一的,但是CSS引擎不会对此进行验证或关心。
Rex M

@Rex M-尽管给定一个元素,但无论它是否唯一,它都不能有多个id,这很有用。我在Firefox下尝试过此操作,忽略了具有两个ID的元素。但是,元素可以具有多个类。
Usagi

div.sidebar与div #sidebar是否相同?
Ali Gajani 2014年

选拔链接不好:(
Zeek2 '18

28

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


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>

“命名元素”具有误导性
鲍比·杰克

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

我同意Bobby的观点-元素可以具有名称和ID。您如何称呼此类元素?
John McCollum'3

8

还需要注意的是,在级联中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>

颜色:蓝色的规则将覆盖颜色:红色规则。


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

4

.class 针对以下元素:

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

#class 针对以下元素:

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

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


4

几乎每个人都已经说过:

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

两者之间的根本区别在于,您可以一次又一次地重复使用页面上的类,而ID只能使用一次。也就是说,如果您坚持使用WC3标准。

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

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



-2

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

这是排队。

矩阵

#style 0,0,1,0 id

.style 0,1,0,0 class

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.