对已经说过的内容做几个快速扩展…

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有特定的样式。菜单和.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

是的，他们是不同的……

#是一个id选择器，用于瞄准具有唯一id的单个特定元素，但是。是一个类选择器，用于针对具有特定类的多个元素。换句话说:

#foo{}将使用id="foo"属性对单个元素进行样式化 .foo{}将使用class="foo"属性对所有元素进行样式化(你也可以将多个类分配给一个元素，只是用空格分隔它们，例如class="foo bar")

典型的使用

一般来说，你使用#样式化一些你知道只会出现一次的东西，例如，像边栏，横幅区域等高级布局。

类用于样式重复的地方，例如，你为错误消息设置了一个特殊形式的头，你可以创建一个样式h1。错误{}，只适用于<h1 class=" Error ">

特异性

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

了解更多关于CSS选择器的知识

查看Selectutorial了解更多关于CSS选择器的入门知识——它们非常强大，如果你的概念只是“#用于div”，那么你最好仔细阅读一下如何更有效地使用CSS。

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

#是一个id选择器。它只匹配具有匹配id的元素。 Next样式规则将匹配id属性值为"green"的元素:

#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>女巫有一个矩阵级别或1,0,0,0。 @media查询将覆盖上面的所有内容… 我不确定，但我认为ID选择器#只能在一个页面中使用一次。

点(.)表示类名，而散列(#)表示具有特定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>

对已经说过的内容做几个快速扩展…

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有特定的样式。菜单和.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }