#和。在为一个元素声明一组样式时,在决定使用哪一种样式时使用的语义是什么?


当前回答

是的,他们是不同的……

#是一个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的元素。

类名:

<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的元素。 Next样式规则将匹配id属性值为"green"的元素:

#green {color: green}

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

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

“。”表示类,“#”表示ID。

两者的根本区别在于,您可以在页面上反复重用类,而ID只能使用一次。当然,前提是您坚持WC3标准。

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

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

是的,他们是不同的……

#是一个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(#)选择器比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>

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