在CSS中,"."之间的区别是什么.和"#"声明一组样式？

Question

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

Answer 1

是的,他们是不同的......

#是一个id选择器,用于定位具有唯一ID 的单个特定元素,但是.是一个类选择器,用于使用特定类来定位多个元素.换一种方式:

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

典型用途

一般来说,你使用#来设计一些你知道只会出现一次的东西,比如像高级布局这样的东西,比如侧边栏,横幅区等.

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

特异性

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

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

有关CSS选择器的更多精彩入门,请参阅Selectutorial - 它们非常强大,如果您的概念只是"#用于DIV",那么您应该更好地阅读有关如何更有效地使用CSS的信息.

编辑:看起来像Selectutorial可能已经去了天空中的大网站,所以请尝试使用此存档链接.

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属性必须是唯一的,因此如果您有多个元素需要特定样式,则应使用类名.

Answer 3

dot(.)表示类名,而hash(#)表示具有特定id属性的元素.该类将应用于使用该特定类装饰的任何元素,而#style仅适用于具有该特定id的元素.

班级名称:

<style>
   .class { ... }
</style>

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

命名元素:

<style>
   #name { ... }
</style>

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

Answer 4

值得注意的是,在级联中,id(#)选择器更具体比ab(.)选择器.因此,id语句中的规则将覆盖类语句中的规则.

例如,如果以下两个语句都是:

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

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

应用于相同的HTML元素:

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

在颜色:蓝色的规则将覆盖颜色:红色规则.

Answer 5

关于已经说过的几个快速扩展......

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

Answer 6

几乎每个人都已经说过：

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

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

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

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