div class vs id

什么时候使用div最好是使用class vs id?

最好是使用,在HTML中说字体变种或元素? 然后使用id的结构/容器?

这是我一直有点不确定,任何帮助将是伟大的。

22 Solutions collect form web for “div class vs id”

使用id来标识只有一个页面上的单个实例的元素。 例如,如果您将一个导航栏放在特定位置,请使用id="navigation"

使用class将所有行为以某种方式performance出来的元素进行分组。 例如,如果您希望公司名称在正文中以粗体显示,则可以使用<span class='company'>

要理解的最重要的事情是ID必须是唯一的:在一个页面中只有一个给定ID的元素应该存在。 因此,如果您想要引用特定的页面元素,那通常是最好的select。

如果有多个类似的元素,则应使用元素类来标识它们。

一个非常有用的,令人惊讶的是已知的事实是,你可以通过在类名之间放置空格来将多个类实际应用于单个元素。 因此,如果您发布了由当前login的用户编写的问题,则可以使用<div class =“question currentAuthor”>标识它。

想想大学。

 <student id="JonathanSampson" class="Biology" /> <student id="MarySmith" class="Biology" /> 

学生证是不同的。 校园里没有两个学生会有同样的学生证。 但是,许多学生可以并将至less分享一个class级

把多个学生放在同一个class级标题下,生物学101是可以的。但是将多个学生放在一个学生下是不可接受的。

规定学校对讲系统时,可以将规则授予一个class级

“生物课上课,明天会穿红衫吗?”

 .BiologyClass { shirt-color:red; } 

或者,您可以通过调用他的唯一ID来为特定学生提供规则:

“乔纳森·桑普森请明天穿绿色衬衫吗?”

 #JonathanSampson { shirt-color:green; } 

ID必须是唯一的,但是在CSS中,当找出两个相互冲突的指令中的哪一个时,它们也会优先考虑。

 <div id="section" class="section">Text</div> 
 #section {font-color:#fff} .section {font-color:#000} 

文本将是白色的。

如果您想将类似的样式应用于许多不同的div或元素,那么类很棒。 ids是好的,当你想要解决一个特定的元素进行格式化或使用JavaScript进行更新。

使用ID的另一个好处是能够将其定位到锚标签中:

 <h2 id="CurrentSale">Product I'm selling</h2> 

将允许你在其他地方直接链接到网页上的该点:

 <a href="#CurrentSale">the Current Sale</a> 

一个常见的用法是为博客上的每个标题添加一个带有date戳的ID(比如说id =“date20080408”),这将允许您专门定位博客页面的这一部分。

记住ID的命名规则更为重要,主要是它们不能以数字开头。 看到类似的SO问题: html中id属性的有效值是什么

HTML标准本身回答你的问题:

没有两个对象可能具有相同的ID,但是任意数量的对象可以具有相同的类别。

所以如果你只想将某些CSS样式属性应用到一个DIV中,那就是一个ID。 如果您希望某些样式属性应用于多个DIV,则必须是一个类。

请注意,你可以混合两者。 您可以让两个DIV属于同一个class级,但给他们不同的ID。 然后,您可以将共同的风格应用于课程,以及将任何一个特定的内容应用于其ID。 浏览器将首先应用类风格,然后是ID风格,所以ID风格可以覆盖以前设置的任何类。

还有一些事情要记住:

  • 当使用ASP.Net时,你不能完全控制元素的ID,所以你几乎不得不使用class(注意这比以前less了)。
  • 当你可以帮助时,最好不要使用。 而是指定元素types和它的父types 。 例如,包含navarea类的div中的无序列表可以这样select:

     div.NavArea ul { /* styles go here */ } 

现在,您可以使用一个类的应用程序为您的整个navarea的大部分逻辑分区

ID应该是唯一的。 CLASSES应该被分享。 所以,如果您有一些将应用于多个DIV的CSS格式,请使用一个类。 如果只有一个(作为一个要求,而不是偶然),使用一个ID。

我想我们都知道什么是类,但是如果你把ID看作是标识符而不是造型工具,那么你就不会有太大的错误。 试图定位某件物品时,您需要一个标识符,如果您有多个具有相同ID的物品,则无法再识别它。

当编写你的css的IDs和CLASSes时,尽可能使用最小的css类是有好处的,尽量不要使用id太重,否则你会不断地写更强的声明和很快就会有一个很重要的css文件。

在哪里使用ID和class级

两者之间的简单区别在于,虽然一个类可以在页面上重复使用,但每个页面只能使用一次ID。 因此,在标记页面上主要内容的div元素上使用一个ID是合适的,因为只有一个主要内容部分。 相比之下,您必须使用一个类来在表格上设置交替的行颜色,因为它们根据定义将被多次使用。

ID是一个非常强大的工具。 具有ID的元素可以是以某种方式操作元素或其内容的一段JavaScript的目标。 ID属性可以用作内部链接的目标,用名称属性replace锚点标签。 最后,如果您使自己的ID清晰且合乎逻辑,就可以将其作为文档中的一种“自我文档”。 例如,如果块的开始标记的ID为“main”,“header”,“footer”,则不一定需要在块之前添加注释,以指示代码块将包含主要内容“等等

如果您想要在页面的多个位置使用这种样式,请使用一个类。 如果您想为单个对象进行大量的自定义操作,请在页面的侧面指定一个导航栏,那么最好使用一个ID,因为您不太可能需要其他任何样式的组合。

id应该是页面上的元素唯一标识符,这有助于操纵它。 任何外部CSS定义的风格,应该在多个元素中使用,应该在class属性上

 <div class="code-formatting-style-name" id="myfirstDivForCode"> </div> 

在页面上使用一个唯一的元素,你想做一些非常具体的事情,一个类的东西,你可以重复使用的页面的其他部分。

id属性用于元素在文档中唯一标识它们,而class属性可以具有相同文档中许多元素共享的相同值。

所以,如果每个文档只有一个要使用样式的元素(例如#title),那么就使用id 。 如果有多个元素可以使用这个风格,那么就去上课吧

我会说,只要你认为一个样式元素要在页面上重复,最好使用一个类。 像HeaderImage,FooterBar之类的项目可以很好地用作ID,因为你只能使用它一次,这将有助于防止意外复制它,因为有些编辑会在你有重复的ID时提醒你。

如果要dynamic生成div元素,并且希望将特定项目作为格式化目标,我也可以看到它有帮助。 你可以给它一个正确的代号,而不是search元素,然后更新它的类。

我select的风格是当CSS样式应用于几个div以相同的方式使用类标识。 如果结构或容器实际上只应用了一次,或者可以从默认inheritance它的样式,我没有理由使用类标识。

所以这将取决于你的div是否是其中之一。 例如,一个代表问题的div在stackoverflow网站上的答案。 在这里,您可能需要为“答案”类定义样式,并将其应用于每个“答案”格。

如果你使用的是.Net网页控件,那么有时候使用类作为.Net会改变网页控件div id在运行时(使用runat =“server”的地方)。

使用类允许您容易地build立与字体,间距,边界等单独的类风格。我通常使用多个文件来存储不同types的格式信息,例如basic_styles.css简单的站点范围的格式,ie6_styles.css浏览器特定的样式(在这种情况下是IE6)etc和template_1.css来获取布局信息。

你select哪种方式尽量保持一致,以帮助维护。

同样,你可以通过JavaScript和DOM命令(比如GetElementById)来操作一个你特定的id的元素。

一般来说,我认为把所有主要的结构分隔符都设为一个id是有用的,即使最初我没有任何特定的CSS规则可以应用,但我在未来有这样的能力。 另一方面,我使用可以多次使用的元素的类 – 例如,包含图像和标题的div – 我可能有几个类,每个类都有不同的样式值。

请记住,所有事情都是平等的,id规范中的样式规则优先于类规范中的样式规则。

除了id和class对于设置单个项目的风格和类似的项目很有帮助之外,还有一个需要注意的地方。 在一定程度上也取决于语言。 在ASP.Net中,你可以扔在Div的ID和ID。 但是,如果您使用面板而不是Div,您将失去该ID。

类是可以在页面上多次使用的样式,ID是定义元素特殊情况的唯一标识符。 标准说ID只能在页面中使用一次。 所以,当你想在一个页面中使用多个元素的样式时,应该使用类,而当你只想使用一个元素时,应该使用类。

另一件事是,对于类,你可以使用多个值(通过在每个类之间放置空格,class ='blagh blah22 blah')with ID,你只能在每个元素上使用ID。

为ID定义的样式会覆盖为类定义的样式,因此在#uniquething中,样式设置将覆盖.whatever样式,如果两者冲突。

所以你可能应该使用ID来表示标题,你的“侧边栏”或其他东西,等等 – 每页只出现一次。

对我来说:如果使用类,当我将在CSS中做某些事情或为元素添加名称,并可以在页面中的所有元素中使用。

所以ID我用于独特的元素

例如:

 <div id="post-289" class="box clear black bold radius"> 

CSS:

 .clear {clear:both;} .black {color:black;} .bold {font-weight:bold;} .radius {border-radius:2px;} 
  • HTML - 如何使整个DIV超链接?
  • 在脚本标签中,何时需要CDATA部分?
  • HTML的隐藏function
  • 你怎么做一个div“tabbable”?
  • 内嵌块列表项之间的空格
  • 是否有可能使用JSF + Facelets与HTML 4/5?
  • HTML:是否有可能在XHTML有效的方式在每个表行中有一个FORM标记?
  • 显示:内联块额外保证金
  • 查看生成的网页源的最佳途径?
  • 用于ID,类和包含元素types前缀的HTML命名约定?
  • 如何使用JavaScript和CSS淡入和淡出