当涉及到CSS时,<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?
我看到不同的开发人员用这两种方式来做这件事,因为我是自学的,所以我从来没有真正弄清楚。
当涉及到CSS时,<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?
我看到不同的开发人员用这两种方式来做这件事,因为我是自学的,所以我从来没有真正弄清楚。
当前回答
id必须是唯一的,因为类可以应用于很多东西。在CSS中,id看起来像#elementID,类元素看起来像.someClass
一般来说,当您有许多相似的东西时,当您想引用特定的元素和类时,请使用id。例如,常见的id元素包括页眉、页脚、边栏。常见的类元素是highlight或external-link。
阅读级联并理解分配给各种选择器的优先级是个好主意:http://www.w3.org/TR/CSS2/cascade.html
但是,您应该了解的最基本的优先级是id选择器优先于类选择器。如果你有这个:
<p id="intro" class="foo">Hello!</p>
and:
#intro { color: red }
.foo { color: blue }
文本会是红色的,因为id选择器优先于类选择器。
其他回答
一个CLASS应该用于您希望具有相同样式的多个元素。ID应该用于唯一的元素。请参阅本教程。
如果您想成为一个严格的墨守成规者,或者如果您希望您的页面符合标准,那么您应该参考W3C标准。
在哪里使用ID而不是类
两者之间的简单区别是,虽然类可以在页面上重复使用,但ID在每个页面上只能使用一次。因此,在标记页面主要内容的div元素上使用一个ID是合适的,因为将只有一个主要内容部分。相反,您必须使用一个类来设置表上的交替行颜色,因为根据定义,它们将被使用不止一次。
IDs are an incredibly powerful tool. An element with an ID can be the target of a piece of JavaScript that manipulates the element or its contents in some way. The ID attribute can be used as the target of an internal link, replacing anchor tags with name attributes. Finally, if you make your IDs clear and logical, they can serve as a sort of “self documentation” within the document. For example, you do not necessarily need to add a comment before a block stating that a block of code will contain the main content if the opening tag of the block has an ID of, say, "main", "header", "footer", etc.
1) div id不可重用,只能应用于HTML的一个元素,而div类可以添加到多个元素中。
2)一个id更重要,如果两者都应用于同一个元素,并且有冲突的样式,id的样式将被应用。
3) Style元素总是引用div类。(点)在他们的名字前面,而div id类是通过在他们的名字前面放一个#(哈希)来引用的。
4)举例:-
<style>声明- .red-background {background-color:红色;} 在<style>声明- #blue-background {background-color:蓝色;} <div class="red-background" id="blue-background">Hello</div> 这里的背景将是蓝色的
任何元素都可以有类或id。
类用于引用某种类型的显示,例如,您可能有一个css类用于表示这个问题的答案的div。因为会有很多答案,多个div将需要相同的样式,你将使用一个类。
一个id只引用一个元素,例如右边的相关部分可能有特定于它的样式,而不是在其他地方重用,它将使用一个id。
从技术上讲,您可以使用所有的类,或者在逻辑上拆分它们。但是,您不能对多个元素重用id。
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来区分治疗有点反常。只要知道,当Sass/SCSS领域的开发人员得到这些东西时,嵌套id正在成为常态。
最后,当涉及到选择器性能和优先级时,ID往往会胜出。这完全是另一个主题。