Css Div的类vs id
当使用divs时，什么时候最好使用类vs id 最好使用类，比如说html中的字体变量或元素？然后对结构/容器使用idCss Div的类vs id,css,class,xhtml,Css,Class,Xhtml,当使用divs时，什么时候最好使用类vs id 最好使用类，比如说html中的字体变量或元素？然后对结构/容器使用id 这是我一直有点不确定的地方，任何帮助都会很好。当您想将类似的样式应用于许多不同的div或元素时，类是很好的。当您想要为格式化或使用javascript更新而寻址特定元素时，ID是很好的。ID应该是唯一的。课程应该共享。因此，如果您有一些将应用于多个DIV的CSS格式，请使用一个类。如果只是一个需求，而不是偶然，请使用ID。如果您希望在页面的多个位置使用该样式，请使用类。如果你想
这是我一直有点不确定的地方，任何帮助都会很好。当您想将类似的样式应用于许多不同的div或元素时，类是很好的。当您想要为格式化或使用javascript更新而寻址特定元素时，ID是很好的。ID应该是唯一的。课程应该共享。因此，如果您有一些将应用于多个DIV的CSS格式，请使用一个类。如果只是一个需求，而不是偶然，请使用ID。如果您希望在页面的多个位置使用该样式，请使用类。如果你想对一个对象进行大量定制，比如说页面侧面的导航条，那么id是最好的，因为你不太可能在其他任何地方需要这种样式组合。id必须是唯一的，但在CSS中，它们在确定要遵循两个冲突指令中的哪一个时也会优先考虑
<div id="section" class="section">Text</div>
文本将为白色。id应该是页面上的元素唯一标识符，这有助于对其进行操作。应该在多个元素中使用的任何外部CSS定义的样式都应该位于class属性上
<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>
使用id表示页面上唯一的元素，您希望对其执行非常特定的操作，使用类表示可以在页面的其他部分重用的元素。使用id标识页面上只有一个实例的元素。例如，如果要将单个导航栏放置在特定位置，请使用id=navigation 使用类对所有行为都具有特定方式的元素进行分组。例如，如果希望公司名称在正文文本中以粗体显示，可以使用。id属性用于元素在文档中唯一标识它们，而class属性可以具有相同的值，由同一文档中的多个元素共享
因此，实际上，如果每个文档中只有一个元素将使用样式，例如标题，则使用id。如果多个元素可以使用样式，则使用类。我会说，每当您认为某个样式元素将在页面上重复时，最好使用类。HeaderImage、FooterBar等项目作为ID很好，因为您只会使用一次，这有助于防止您意外复制它，因为某些编辑器会在您有重复ID时提醒您
如果您要动态生成div元素，并希望将特定项作为格式化的目标，我也会认为它很有用；您只需在生成时为其提供适当的ID，而不是搜索元素然后更新其类。需要了解的最重要的一点是ID必须是唯一的：一个页面中只能存在一个具有给定ID的元素。因此，如果你想引用一个特定的页面元素，那通常是最好的选择 如果有多个元素在某种程度上相似，则应使用elements类来标识它们
一个非常有用但鲜为人知的事实是，通过在类名之间加空格，实际上可以将多个类应用于单个元素。因此，如果您发布了一个由当前登录用户编写的问题，您可能会将其标识为。HTML标准本身会回答您的问题： 没有两个对象可以具有相同的ID，但是任意数量的对象可以具有相同的类 因此，如果您只想将某些CSS样式属性应用于单个DIV，那将是一个ID。如果您想将某些样式属性应用于多个DIV，那必须是一个类
请注意，您可以将两者混合使用。您可以使两个div属于同一个类，但给它们不同的id。然后，您可以将两者通用的样式应用于类，并将其中任何一个的特定内容应用于其ID。浏览器将首先应用类样式，然后应用ID样式，这样ID样式就可以覆盖类以前设置的任何内容。类用于一个页面上可以多次使用的样式，ID是定义元素特殊情况的唯一标识符。标准规定ID在一个页面中只能使用一次。因此，当您想在页面中的多个元素上使用样式时，应该使用类，当您只想使用一次样式时，应该使用ID 另一件事是，对于类，您可以通过在每个类之间放置空格来使用多个值，即带有ID的la class='blagh blah22 blah'wheras，您只能在每个元素的ID上使用 为ID定义的样式将覆盖为类定义的样式，因此在中，uniquething的样式设置将覆盖的样式。无论两者是否冲突 因此，您可能应该将ID用于诸如标题、侧边栏之类的东西，等等，这些东西
每页只出现一次。当css样式以相同的方式应用于多个div时，我选择使用类标识。如果结构或容器实际上只应用一次，或者可以从默认值继承其样式，那么我认为没有理由使用类标识
因此，这将取决于你的div是否是其中之一；例如，代表stackoverflow网站上答案的问题的div。在这里，您需要定义Answer类的样式，并将其应用于每个Answer div。如果您使用.Net web控件，则有时只使用类会容易得多，因为.Net在运行时使用runat=server更改web控件div id 通过使用类，您可以轻松地使用单独的字体、间距、边框等类构建样式。我通常使用多个文件来存储单独类型的格式信息，例如，用于简单站点范围格式的basic_styles.css，ie6_styles.css用于浏览器特定样式，在本例中，ie6 etc和template_1.css用于布局信息
无论您选择哪种方式，请尝试保持一致以帮助维护 此外，可以通过JavaScript和DOM命令（例如GetElementById）来操作您指定的特定id的元素 总的来说，我发现给所有的主要结构div一个id是很有用的——即使最初我没有任何特定的CSS规则可以应用，我在未来也有这种能力。另一方面，我为那些可以多次使用的元素使用类——例如，包含图像和标题的div——我可能有几个类，每个类的样式值略有不同
但请记住，在所有条件相同的情况下，id规范中的样式规则优先于类规范中的样式规则。请记住一些其他事项： 使用ASP.Net时，您无法完全控制元素的ID，因此您几乎必须使用类注意，这已不像以前那样正确。 如果你能帮上忙，最好两个都不用。相反，请指定元素类型及其父元素的类型。例如，div中包含的无序列表和navarea类可以通过以下方式单独列出：
div.NavArea ul { /* styles go here */ }
现在，您可以使用一个类应用程序为整个navarea的大部分区域设置逻辑分区的样式。除了id和类非常适合设置单个项目的样式，而不是类似的一组项目，还有另一个需要记住的警告。这在某种程度上也取决于语言。在ASP.Net中，您可以输入Div和have id。但是，如果使用面板而不是Div，则会丢失id。使用id的另一个好处是能够将其定位在锚定标记中：
<h2 id="CurrentSale">Product I'm selling</h2>
<a href="#CurrentSale">the Current Sale</a>
同样重要的是要记住，ID的命名规则有更多的限制，主要是它们不能以数字开头。请参阅类似的SO问题：我想我们都知道类是什么，但如果您将ID视为标识符而不是样式工具，您不会犯太大的错误。当您试图定位某个对象时，您需要一个标识符，如果您有多个具有相同ID的项目，您将无法再识别它 在为ID和类编写css时，尽可能使用最少的css类是有益的，并且在必要时尽量不要过多地使用ID，否则您将一直致力于编写更强大的声明，很快就会有一个css文件充满了！重要。想想大学。 或者，您可以通过调用特定学生的唯一ID为其指定规则： 乔纳森·桑普森明天能穿件绿色衬衫吗 乔纳森·桑普森{ 衬衫颜色：绿色； } 在哪里使用ID和类 两者之间的简单区别在于，虽然类可以在页面上重复使用，但每个页面只能使用一次ID。因此，在div元素上使用ID标记页面上的主要内容是合适的，因为只有一个主要内容部分。相反，您必须使用一个类来设置表上的交替行颜色，因为根据定义，它们将被多次使用 IDs是一个非常强大的工具。ID为的元素可以是JavaScript的目标，JavaScript以某种方式操纵元素或其内容。ID属性可以用作内部链接的目标，用name属性替换锚定标记。最后，如果您使您的ID清晰且符合逻辑，那么它们可以作为文档中的一种“自我文档”。例如，您不一定需要在一个块之前添加注释，说明如果开头的t 块的ag有一个ID，比如main、header、footer等等。对于我来说：如果使用类，我将在CSS中执行某些操作或向元素添加名称，并且可以在页面中的所有元素中使用 所以我使用id来表示惟一元素 例：
虽然这个答案很好，但我认为下面还有更好的答案——比如肖恩·麦克马斯和梅基的答案。除非你百分之百确定id永远不会被更改，否则使用id是不明智的。在当今快速响应格式和样式的时代，这种情况很少出现。只需使用CSS中其他地方未使用的类描述符-使用CTRL-F或CTRL-SHIFT-I进行检查。但是，必须将ID添加到JavaScript具有getElementById的元素中。这里关于使用多个类的附加信息特别有用。包括它做得很好。这个问题不仅适用于div元素，而且适用于HTML页面上的所有元素。如果在大学的现实生活中应用，这些规则的可能重复，可能重复将是史诗般的。
<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />
<div id="post-289" class="box clear black bold radius">
.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}