题
有什么区别 <div class="">
和 <div id="">
当谈到 CSS 时?可以用吗 <div id="">
?
我看到不同的开发人员以两种方式这样做,而且由于我是自学的,所以我从未真正弄清楚。
解决方案
ids
必须是唯一的,其中 class
可以应用到很多事情上。在CSS中, id
看起来像 #elementID
和 class
元素看起来像 .someClass
一般来说,使用 id
每当您想引用特定元素并且 class
当你有很多相似的东西时。例如,常见的 id
元素是这样的东西 header
, footer
, sidebar
. 。常见的 class
元素是这样的东西 highlight
或者 external-link
.
阅读级联并了解分配给各种选择器的优先级是个好主意: http://www.w3.org/TR/CSS2/cascade.html
然而,您应该理解的最基本的优先顺序是 id
选择器优先于 class
选择器。如果你有这个:
<p id="intro" class="foo">Hello!</p>
和:
#intro { color: red }
.foo { color: blue }
文本会是红色的,因为 id
选择器优先于 class
选择器。
其他提示
也许一个类比将有助于理解其中的差异:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
学生 ID 卡是不同的。校园里不会有两个学生有同一个学生 ID 卡片。然而,许多学生可以并且愿意分享至少一项 班级 与彼此。
将多个学生归为一个学生是可以的 班级 标题,例如生物学。但将多个学生置于一个学生之下是绝对不可接受的 ID.
给予时 规则 通过学校对讲系统,您可以给 规则 到一个 班级:
“明天,所有学生都必须穿红衬衫去上生物课。”
.Biology {
color: red;
}
或者,您可以通过调用特定学生的独特规则来为他制定规则 ID:
“乔纳森·桑普森明天将穿绿色衬衫。”
#JonathanSampson {
color: green;
}
在本例中,Jonathan Sampson 收到两个命令:一个是生物课上的学生,另一个是直接要求。因为通过 id 属性直接告诉 Jonathan 要穿绿色衬衫,所以他将忽略之前穿红色衬衫的请求。
更具体的选择器获胜。
哪里使用 ID 和类
两者之间的简单区别在于,虽然类可以在页面上重复使用,但 ID 每个页面只能使用一次。因此,在标记页面主要内容的 div 元素上使用 ID 是合适的,因为只有一个主要内容部分。相反,您必须使用类在表上设置交替的行颜色,因为根据定义它们将被多次使用。
ID 是一个非常强大的工具。具有 ID 的元素可以是一段 JavaScript 的目标,该 JavaScript 片段以某种方式操作该元素或其内容。ID属性可以用作内部链接的目标,用名称属性替换锚标记。最后,如果您的 ID 清晰且符合逻辑,它们可以充当文档中的一种“自我文档”。例如,如果块的开始标记的 ID 为“main”、“header”、“footer”,则不一定需要在块之前添加注释来说明代码块将包含主要内容“, ETC。
id 在整个页面中必须是唯一的。
一个类可以应用于许多元素。
有时,使用 ids 是个好主意。
在一个页面中,通常有一个页脚,一个页眉......
然后页脚可能会进入一个带有id的div
<div id="页脚" class="...">
还有课
ID 是唯一的。课程不是。元素也可以有多个类。类也可以动态地添加到元素中或从元素中删除。
任何可以使用 ID 的地方都可以使用类。反之则不然。
约定似乎是对每个页面上的页面元素(如“导航栏”或“菜单”)使用 ID,对其他所有内容使用类,但这只是约定,您会发现使用情况存在很大差异。
另一个区别是,对于表单输入元素, <label>
元素通过 ID 引用字段,因此如果要使用,则需要使用 ID <label>
. 。是一个可访问性的东西,你真的应该使用它。
在过去的几年里,ID 也是首选,因为它们可以在 Javascript 中轻松访问(getElementById)。随着 jQuery 和其他 Javascript 框架的出现,这现在几乎不再是问题了。
类就像类别。许多 HTML 元素可以属于一个类,并且一个 HTML 元素可以有多个类。类用于应用通用样式或可跨多个 HTML 元素应用的样式。
ID 是标识符。他们是独一无二的;任何人不得拥有相同的 ID。ID 用于将独特的样式应用于 HTML 元素。
我以这种方式使用 ID 和类:
<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>
在此示例中,标题和内容部分可以通过#header 和#content 设置样式。内容的每个部分都可以通过#content .section 应用通用样式。只是为了好玩,我为中间部分添加了一个“特殊”类。假设您希望某个特定部分具有特殊的样式。这可以通过 .special 类来实现,但该部分仍然继承#content .section 的常见样式。
当我进行 JavaScript 或 CSS 开发时,我通常使用 ID 来访问/操作非常具体的 HTML 元素,并使用类来访问/将样式应用到广泛的元素。
CSS 是面向对象的。ID表示实例,class表示类。
CSS 选择器空间实际上允许条件 id 样式:
h1#my-id {color:red}
p#my-id {color:blue}
将按预期呈现。你为什么要这样做?有时ID是动态生成的,等等。进一步的用途是根据高级 ID 分配以不同方式呈现标题:
body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}
就我个人而言,我更喜欢更长的类名选择器:
body#list-page .title-block > h1 {font-size:56px}
因为我发现使用嵌套 ID 来区分处理有点反常。只需要知道,作为开发者 萨斯/社会保障体系 全世界都掌握了这些东西,嵌套 ID 正在成为常态。
最后,当谈到选择器性能和优先级时,ID 往往会胜出。这完全是另一个话题了。
应用 CSS 时,将其应用于类并尽量避免应用于 id。ID 只能在 JavaScript 中用于获取元素或用于任何事件绑定。
应该使用类来应用 CSS。
有时您确实必须使用类来进行事件绑定。在这种情况下,请尝试避免用于应用 CSS 的类,而添加没有相应 CSS 的新类。当您需要更改任何类的 CSS 或更改任何元素的 CSS 类名称时,这将很有帮助。
任何元素都可以有一个类或一个 id。
类用于引用某种类型的显示,例如,您可能有一个代表此问题答案的 div 的 css 类。由于会有很多答案,多个 div 需要相同的样式,并且您将使用一个类。
id 仅指单个元素,例如右侧的相关部分可能具有特定于它的样式而不在其他地方重用,它将使用 id。
从技术上讲,您可以对所有这些使用类,或者从逻辑上将它们分开。但是,您不能对多个元素重复使用 id。
类用于将您的样式应用到一组元素。ID 样式仅适用于具有该 ID 的元素(应该只有一个)。通常您使用类,但如果有一次性的情况,您可以使用 ID(或者直接将样式粘贴到元素中)。
高级开发中 ID我们基本上可以使用 JavaScript。
为了可重复的目的, 班级es 很方便,相反 IDs 应该是唯一的。
下面是一个例子来说明上面的表达式:
<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>
现在你可以在这里看到 box
和 box1
两 (2) 不同 <div>
元素,但我们可以应用 box
和 bg-color-red
给他们俩上课。
这个概念是继承 面向对象编程 语言。
1) div id 不可重用,只能应用于 HTML 的一个元素,而 div 类可以添加到多个元素。
2) id 更重要,如果两者应用于同一元素且样式冲突,则将应用 id 的样式。
3) 样式元素总是通过放置 .div 来引用 div 类。(点)在他们的名字前面,而 div id class 通过在他们的名字前面放一个#(散列)来引用。
4) 示例:-
班级在
<style>
宣言 -.red-background { background-color: red; }
身份证号在
<style>
宣言 -#blue-background {background-color: blue;}
<div class="red-background" id="blue-background">Hello</div>
这里的背景将是蓝色的