Answers:
#
是ID选择器,用于定位具有唯一ID 的单个特定元素,但。是一个类选择器,用于将特定类的多个元素作为目标。换一种方式:
#foo {}
将为带有属性声明的单个元素设置样式id="foo"
.foo {}
将使用属性设置所有元素的样式class="foo"
(您也可以将多个类分配给一个元素,只需将它们用空格隔开,例如class="foo bar"
)一般来说,您可以使用#来样式化您知道只会出现一次的内容,例如,诸如高级布局div之类的工具条,横幅区域等。
在重复样式的地方使用类,例如说您将特殊形式的标题作为错误消息的标题,则可以创建h1.error {}
仅适用于样式的样式<h1 class="error">
选择器不同的另一个方面是它们的特殊性-id选择器比类选择器更具体。这意味着,如果元素上的样式冲突,则使用更具体的选择器定义的样式将覆盖不那么具体的选择器。例如,给定的<div id="sidebar" class="box">
任何规则都#sidebar
具有.box
有关CSS选择器的更多入门知识,请参见选件指南-它们功能强大,如果您的概念只是“#用于DIV”,那么您最好阅读一下如何更有效地使用CSS。
编辑:看起来选录可能已经去了天空中的大网站,所以尝试此存档链接。
dot(.
)表示类名,而hash(#
)表示具有特定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.menu
和使用特定样式的通用样式.sub.menu
.menu
{ ... }
.main.menu
{ ... }
.other.menu
{ ... }
#是ID选择器。它仅匹配具有匹配ID的元素。下一样式规则将匹配具有id属性的值为“ green”的元素:
#green {color: green}