Question

在为元素声明一组样式时，#和.之间的区别是什么？在决定使用哪一个时，它们的语义是什么？

Answer 1

是的，他们是不同的......

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

#foo {}将设置使用属性id="foo"

单个

.foo {}将使用属性class="foo"设置所有元素的样式（您可以将多个类分配给元素，只需将它们用空格分隔，例如{{1} }）

典型用途

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

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

特异性

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

的规则冲突规则

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

有关CSS选择器的更多精彩引文，请参阅Selectutorial - 它们非常强大，如果您的构思只是“＃用于DIV”，那么您应该仔细阅读有关如何使用CSS的信息更有效。

编辑：看起来Selectutorial可能已经进入了天空中的大网站，所以请尝试使用此archive link。

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

点（.）表示类名称，而哈希（#）表示具有特定 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

值得注意的是，在cascade中， id （#）选择器比ab（.）更specific选择。因此，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属性将取代类属性也很有用。

Answer 7

.class定位以下元素：

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

#class定位以下元素：

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

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

Answer 8

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

#green {color: green}

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

Answer 9

以下是我解释te规则的方法.style和#style是矩阵的一部分。如果不是正确的顺序，他们可以互相覆盖，或导致冲突。

这是阵容。

矩阵

#style 0,0,1,0 id

.style 0,1,0,0 class

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

在CSS中，“。”之间的区别是什么。和“＃”声明一组样式？

9 个答案:

是的，他们是不同的......

典型用途

特异性

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