div id和div class之间的区别
说到CSS, <div class="">
和<div id="">
什么区别? 可以使用<div id="">
吗?
我看到不同的开发者都是这样做的,既然我是自学的,我从来没有真正明白过。
ids
必须是唯一的,因为class
可以应用于许多事情。 在CSS中, id
看起来像#elementID
, class
元素看起来像.someClass
一般来说,只要你想引用一个特定的元素和class
,就可以使用id
,当你有很多事情都是一样的。 例如,常见的id
元素是诸如header
, footer
, sidebar
类的东西。 常见的class
元素是像highlight
或external-link
东西。
阅读级联并理解分配给各种select器的优先级是个好主意: http : //www.w3.org/TR/CSS2/cascade.html
但是,您应该了解的最基本的优先级是id
select器优先于class
select器。 如果你有这个:
<p id="intro" class="foo">Hello!</p>
和:
#intro { color: red } .foo { color: blue }
文本将是红色的,因为id
select器优先于class
select器。
也许一个比喻将有助于理解不同之处:
<student id="JonathanSampson" class="Biology Calculus" /> <student id="MarySmith" class="Biology Networking" />
学生证是不同的。 校园里没有两个学生会有同样的学生证。 但是,许多学生可以并将至less分享一个class级 。
把多个学生放在一个class级的标题下是可以的,比如生物学。 但是将多个学生放在一个学生证号下是不可接受的。
规定学校对讲系统时,可以将规则授予一个class级 :
“明天所有的学生都要穿红色的衬衫去上生物课。”
.Biology { color: red; }
或者,您可以通过调用他的唯一ID来为特定学生提供规则:
“乔纳森·桑普森明天要穿绿色的衬衫。”
#JonathanSampson { color: green; }
在这种情况下,乔纳森·桑普森(Jonathan Sampson)正在接受两个命令:一个是生物课上的学生,另一个是直接要求。 因为乔纳森被直接告知,穿着绿色的衬衫,他会不顾先前要求穿红色衬衫的要求。
更具体的select器胜利。
在哪里使用ID和class级
两者之间的简单区别在于,虽然一个类可以在页面上重复使用,但每个页面只能使用一次ID。 因此,在标记页面上主要内容的div元素上使用一个ID是合适的,因为只有一个主要内容部分。 相比之下,您必须使用一个类来在表格上设置交替的行颜色,因为它们根据定义将被多次使用。
ID是一个非常强大的工具。 具有ID的元素可以是以某种方式操作元素或其内容的一段JavaScript的目标。 ID属性可以用作内部链接的目标,用名称属性replace锚点标签。 最后,如果您使自己的ID清晰且合乎逻辑,就可以在文档中作为一种“自我文档”。 例如,如果块的开始标记的ID为“main”,“header”,“footer”,则不一定需要在块之前添加注释,以指示代码块将包含主要内容“等等
一个ID在整个页面中必须是唯一的。
一个类可能适用于许多元素。
有时候,使用ID是一个好主意。
在一个页面中,通常有一个页脚,一个页眉…
然后页脚可能会成为一个ID与一个div
<div id =“footer”class =“…”>
还有一堂课
一个CLASS应该用于你想要相同样式的多个元素。 一个ID应该是一个独特的元素。 看到这个教程 。
如果你想成为一个严格的符合者,或者你想让你的页面符合标准,你应该参考W3C标准。
ID是唯一的。 类不是。 元素也可以有多个类。 也可以dynamic添加和移除类到一个元素。
任何地方你可以使用一个ID,你可以使用一个类。 相反是不正确的。
该惯例似乎是使用每个页面上的页面元素(如“navbar”或“菜单”)的ID和所有其他类的类,但这只是惯例,你会发现在使用上有很大的差异。
另一个区别是对于表单input元素, <label>
元素通过ID引用一个字段,因此如果要使用<label>
则需要使用ID。 是一个无障碍的东西,你真的应该使用它。
在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类来实现,但该部分仍然inheritance#content .section中的常用样式。
当我进行JavaScript或CSS开发时,我通常使用ID来访问/操作非常特定的HTML元素,并且使用类来访问/应用样式到广泛的元素。
CSS是面向对象的。 ID说实例,class说class。
CSSselect器空间实际上允许条件ID风格:
h1#my-id {color:red} p#my-id {color:blue}
将按预期呈现。 你为什么要这样做? 有时ID是dynamic生成的等等。另一个用途是基于高级ID分配来不同地显示标题:
body#list-page #title {font-size:56px} body#detail-page #title {font-size:24px}
就个人而言,我更喜欢更长的类名select器:
body#list-page .title-block > h1 {font-size:56px}
因为我发现使用嵌套ID区分治疗有点不正当。 只要知道,当Sass / SCSS世界的开发者掌握了这些东西的时候,嵌套ID就成为了常态。
最后,当涉及到select器的性能和优先级时,ID往往会胜出。 这是另一个主题。
应用CSS时,将其应用到一个类,尽量避免一个id。 只能在JavaScript中使用ID来获取元素或任何事件绑定。
应该使用类来应用CSS。
有时你必须使用类来进行事件绑定。 在这种情况下,尽量避免用于应用CSS的类,而是添加没有相应CSS的新类。 当你需要改变任何类的CSS或者为所有元素改变CSS类的名字时,这将会有所帮助。
任何元素都可以有一个类或一个id。
一个类被用来引用某种types的显示,例如你可能有一个代表这个问题的答案的div的css类。 由于会有很多答案,所以多个div需要相同的样式,并且您将使用一个类。
一个id只涉及一个元素,例如右边的相关部分可能具有特定的样式,而不会在其他地方重复使用,它将使用一个id。
从技术上讲,你可以使用所有类,或逻辑分割。 但是,您不能重复使用id作为多个元素。
类是将你的风格应用于一组元素。 ID样式只适用于具有该ID的元素(应该只有一个)。 通常你使用类,但是如果有一次性的,你可以使用ID(或者直接将元素粘贴到元素中)。
在高级开发ID我们可以基本上使用JavaScript。
为了可重复的目的, 课程 es很方便地违背了id应该是独特的。
下面是一个说明上述expression式的例子:
<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
是两个不同的<div>
元素,但是我们可以将box
和bg-color-red
类应用到它们两个。
这个概念是OOP语言的inheritance。