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

是的,他们是不同的。。。

# 是一个 id selector ,用于针对 仅有一个的 class selector 用来瞄准 倍数 具有特定类的元素。换言之:

• #foo {} 将设计 使用属性声明的元素 id="foo"
• .foo {} 意志风格 全部的 具有属性的元素 class="foo" class="foo bar" )

典型用途

一般来说,您可以使用#为您知道只会出现一次的内容设置样式,例如,诸如侧边栏、横幅区域等高级布局div。

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

特异性

conflict 在元素上,使用更具体的选择器定义的选择器将覆盖不太具体的选择器。例如,给定 <div id="sidebar" class="box"> #sidebar .box

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

看见 Selectutorial

编辑:看来Selectutorial可能已经进入了天空中的大网站,所以试试这个 archive link

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

圆点( . )表示一个 班 # )表示具有特定属性的元素 身份证件

类名:

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

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

命名元素:

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

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

同样值得注意的是 cascade 一 身份证件 ( # )选择器更重要 specific 比a b( . )选择器。因此,id语句中的规则将覆盖class语句中的规则。

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

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

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

应用于相同的HTML元素:

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

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

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

一 id 必须是唯一的,但可以使用相同的id使不同的样式更具体。

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

就像几乎所有人已经说过的那样:

一段时间( . )表示 ,和一份杂烩( # 身份证件

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

.class 针对以下要素:

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

#class 针对以下要素:

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

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

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

#green {color: green}

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

这是我解释规则的方法 .style 和 #style 是矩阵的一部分。 如果顺序不正确,它们可以相互替代,或导致冲突。

矩阵

#style 0,0,1,0 id

.style 0,1,0,0 class

<style></style> witch具有矩阵级别或 1,0,0,0. @media query将覆盖以上所有内容。。。 # 一页只能使用一次。