类与CSS中的ID（混淆）

我知道我可能会问同样的问题，因为其他用来问，但我真的很困惑什么时候使用ID和类。我已经搜索了一下，并在这里阅读了一些关于Stackoverflow的贴子，但仍然有疑问。据我所知，ID只能使用一次在一个页面中使用，类可以使用类类与CSS中的ID（混淆）

下面这里是CSS样式表，我已经在实践中不止一个：

html,body{ 
    padding:0px; 
    margin:0px; 
    height:100%; 
    background-color:#E9E9E9; 
} 
.infoBoxPad{ 
    background-color:#DFDFDF; 
    width:990px; 
    height:19px; 
    border:solid thin #CCC; 
    margin:auto; 
    display:block; 
} 
#info1{ 
    float:left; 
    width:125px; 
    height:16px; 
    line-height:15px; 
    border-right:thin solid #999; 
    padding-left:20px; 
    padding-right:20px; 
    display:block; 
} 
#info2{ 
    float:left; 
    width:236px; 
    height:15px; 
    line-height:15px; 
    border-right:thin solid #999; 
    padding-left:20px; 
    padding-right:20px; 
    display:block; 
} 
#info2-link{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#000; 
    margin-left:11px; 
    margin-right:11px; 
    float:left; 
    text-decoration:none; 
} 
#info2-link:hover{ 
    text-decoration:underline; 
    color:#03F; 
} 
#info3{ 
    float:left; 
    width:183px; 
    height:16px; 
    line-height:15px; 
    padding-left:20px; 
    padding-right:20px; 
    display:block; 
} 
#info3-link{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#000; 
    margin-right:15px; 
    float:left; 
    text-decoration:none; 
} 
#info3-link:hover{ 
    text-decoration:underline; 
    color:#03F; 
} 
#info-text-bold{ 
    float:left; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
    font-weight:600; 
    padding-right:20px; 
    color:#000; 
    text-decoration:none; 
} 
#info-text-bold1{ 
    float:left; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:600; 
    padding-right:20px; 
    color:#000; 
    text-decoration:none; 
} 
#info-text-bold1:hover{ 
    text-decoration:underline; 
    color:#03F; 
} 
#info1-novice{ 
    color:#09F; 
    text-decoration:none; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:600; 
} 
#info1-novice:hover{ 
    text-decoration:underline; 
} 
.header{ 
    background-color:#FFF; 
    width:990px; 
    height:80px; 
    position:relative; 
    display:block; 
    margin:auto; 
} 
#header-logo{ 
    margin-left:10px; 
    margin-top:20px; 
} 
.nav-bar-wrapper{ 
    background-image:url(nav-bar.gif); 
    background-color:#333; 
    width:990px; 
    height:40px; 
    margin:auto; 
} 
#nav-bar{ 
    margin:0; 
    padding:0; 
} 
#nav-bar ul{ 
    margin:0 0 0 20px; 
    padding:0; 
} 
#nav-bar li{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    float:left; 
    position:relative; 
} 
#nav-bar ul li a{ 
    text-align:center; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    font-weight:600; 
    text-decoration:none; 
    color:#FFF; 
    width:105px; 
    height:40px; 
    display:block; 
    line-height:35px; 
    border-right:1px solid #FFF; 
} 
#nav-bar ul li:hover{ 
    background-color:#666; 
    height:35px; 
} 
.content{ 
    width:990px; 
    height:1000px; 
    background-color:#FFF; 
    position:relative; 
    margin:auto; 
} 
#earn-point{ 
    background-image:url(earnNow.gif); 
    width:300px; 
    height:60px; 
} 
#content-earnpoint{ 
    background-color:#fffbe8; 
    width:278px; 
    height:100px; 
    border:solid thin #F90; 
    display:block; 
    padding:10px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
} 
/**************************************************************************************************************Left Column*/ 
#leftcolumn{ 
    background-color:#FFF; 
    width:300px; 
    margin:25px 10px 0px 10px; 
    float:left; 
} 
#guessing-game{ 
    width:278px; 
    height:37px; 
    margin-top:25px; 
} 
#guessing-game-image{ 
    float:left; 
    margin-right:5px; 
} 
#guessing-game-text{ 
    float:left; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
} 
#guessing-game-text1{ 
    color:#00C; 
    text-decoration:none; 
    font-weight:600; 
} 
#guessing-game-text1:hover{ 
    text-decoration:underline; 
} 
/***********************************************************************************************************Right Column*/ 
#rightcolumn{ 
    background-color:#FFF; 
    width:640px; 
    margin:25px 10px 0px 0px; 
    float:left; 
} 
#advert{ 
    width:640px; 
    height:80px; 
    margin-bottom:10px; 
} 
#earn-reward{ 
    background-color:#FC3; 
    width:640px; 
    height:16px; 
    padding:5px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:18px; 
    line-height:14px; 
} 
#total-reward-points{ 
    background-image:url(total%20reward%20points-background.gif); 
    width:268px; 
    height:184px; 
    margin:20px 0px 0px 0px; 
    padding:9px 15px 0px 15px; 
    border:1px thin solid; 
} 
#image-counter-heading{ 
    margin:5px 10px 10px 0px; 
    display:inline; 
} 
#total-update-counter{ 
    background-color:#F00; 
    width:264px; 
    height:33px; 
    margin:0px; 
    padding:8px 0px 5px 0px; 
} 
#homecounter-heading-wrapper{ 
    width:268px; 
    height:48px; 
    margin:17px 0px 0px 0px; 
    display:block; 
} 
#homecounter-heading{ 
    float:left; 
} 
#online-shopping{ 
    width:650px; 
    height:30px; 
    margin-bottom:5px; 
    padding-top:15px; 
    padding-left:10px; 
    display:block; 
} 
#onlineshopping-logo{ 
    margin-top:5px; 
}

和HTML这里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Smile City</title> 
<link href="smilecity style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div class="infoBoxPad"> 
<!--info1--> 
<div id="info1"><div id="info-text-bold">Jesso</div> 
<img src="novice.gif" />&nbsp;&nbsp;<a href="#" id="info1-novice">Novice</a></div> 
<!--info2--> 
<div id="info2"> 
<a href="#" id="info2-link">Points:118</a> 
<a href="#" id="info2-link">Entries:29</a> 
<a href="#" id="info2-link">Exp:108</a> 
</div> 
<!--info3--> 
<div id="info3"> 
<a href="#" id="info3-link">Account Setting</a> 
<a href="#" id="info-text-bold1">Sign Out</a> 
</div> 
</div><!--End infoBoxPad--> 

<div class="header"> 
<img src="smilecity logo.gif" id="header-logo" /> 
</div><!--End header--> 

<div class="nav-bar-wrapper"> 

<div id="nav-bar"> 

<ul class="nav-bar"> 
<li><a href="#">Home</a></li> 
</ul> 

<ul class="nav-bar"> 
<li><a href="#">Join</a></li> 
</ul> 

<ul class="nav-bar"> 
<li><a href="#">Earn</a></li> 
</ul> 


<ul class="nav-bar"> 
<li><a href="#">Redeem</a></li> 
</ul> 


<ul class="nav-bar"> 
<li><a href="#">Account</a></li> 
</ul> 

<ul class="nav-bar"> 
<li><a href="#">Help</a></li> 
</ul> 

</div><!--End nav-bar--> 
</div><!--End nav-bar-wrapper--> 

<div class="content"> 
<!-- 
--> 

<div id="leftcolumn"> 
<div id="earn-point"></div> 
<div id="content-earnpoint"> 
<strong>Hi Jesse, </strong>here's what you can do to earn points right now: 
<div id="guessing-game"> 
<img src="gameYellowBg.gif" id="guessing-game-image" /> 
<a href="#" id="guessing-game-text1">Play the Guessing Game</a> and you could win up to 105,000 points. 
</div> 
</div><!--End Content-earnpoint--> 

<div id="total-reward-points"> 
<img src="counterHeading1.gif" id="image-counter-heading" /> 
<div id="total-update-counter"></div> 

<div id="homecounter-heading-wrapper"> 
<img src="homeCounterHeading2.gif" id="homecounter-heading" /> 
<img src="checkSml_sc.jpg" id="homecounter-heading" /> 
</div> 

</div><!--End Total reward points--> 

</div><!--End Left column--> 

<div id="rightcolumn"> 
<div id="advert"><img src="ads.jpg" /></div> 

<div id="earn-reward"> 
<strong>Earn Rewards</strong> 
</div> 

<div id="online-shopping"> 

<img src="onlineShoppingHome.gif" id="onlineshopping-logo" /> 

</div><!--End Online-shopping--> 

</div><!--End Right Column--> 

</div><!--End Content--> 

</body> 
</html>

我想我已经取得了这个CSS样式表有一个烂摊子，因为我ID的使用堆。请大家，告诉我何时/如何使用ID和课程？在此先感谢！

编辑：这幅画怎么样？是你如何定义何时使用ID和Class？ alt text

来源

2010-11-11 James1

不，MS Paint没有课程。 – 2010-11-11 21:57:00

请参阅我的更新回答 – Dutchie432 2010-11-12 14:01:16

我倾向于使用ID定位或万一我需要通过javascript选择一个特定的元素。类更适用于将样式应用于您将反复使用的事物。

在你的情况下，标题和导航应该是一个ID。此外，一定不要将一个类命名一样的ID，如您的导航栏：

<div id="nav-bar"> 

<ul class="nav-bar">

来源

2010-11-11 21:21:55

的ID是指一个特定的元素，而CLASS是指一个类型的元素。

当你的CSS说

#searchBox{...}

你是说会有调用“搜索框”的ID一个项目，这是你想要的风格。

<div id="searchBox">Search Box Content</div>

当你的CSS说

.redBorder{...}

这意味着你将有多个实体，所有都是一流的 “redBorder”

<div id="item1" class="redBorder">Content1</div> 
<div id="item2" class="redBorder">Content2</div> 
<div id="item3" class="redBorder">Content3</div>

，而不是

#info1{ 
    float:left; 
    width:125px; 
    height:16px; 
    line-height:15px; 
    border-right:thin solid #999; 
    padding-left:20px; 
    padding-right:20px; 
    display:block; 
} 
#info2{ 
    float:left; 
    width:236px; 
    height:15px; 
    line-height:15px; 
    border-right:thin solid #999; 
    padding-left:20px; 
    padding-right:20px; 
    display:block; 
} 

<div id="info1">...</div> 
<div id="info2">...</div>

的

尝试

.info{ 
    float:left; 
    line-height:15px; 
    border-right:thin solid #999; 
    padding-left:20px; 
    padding-right:20px; 
    display:block; 
} 
#info1{ 
    width:125px; 
    height:16px; 
} 
#info2{ 
    width:236px; 
    height:15px; 
} 

<div id="info1" class="info">...</div> 
<div id="info2" class="info">...</div>

来源

2010-11-11 21:22:32 Dutchie432

您对redBorder的使用会让我感到畏惧语义。课程不应该指定风格......（当然有少数例外） – zzzzBov 2010-11-11 21:27:56

我会有兴趣听到你的理由。 – Dutchie432 2010-11-12 13:50:35

HTML是一种语义标记语言。任何人（知道HTML）都应该能够读取标记并理解内容。对于一个盲人使用'redBorder'是没有意义的。使用'error'是有意义的。 – zzzzBov 2010-11-12 16:35:20

ID应始终是唯一的，类不需要。就那么简单。其他任何东西都是首选。

话虽如此，我认为它看起来更适合尽可能使用儿童选择器。因此，而不是.info2-link使用#info2 a。这样你就不需要为所有事物添加类。

来源

2010-11-11 21:24:51

如果类可以多次使用，那么我可以使用整个样式表的类吗？我发现我可以多次使用ID，就像我上面所做的一样。我认为如果我在整个样式表中使用ID，它仍然可以工作。 – James1 2010-11-11 21:28:01

在您的浏览器中，多次使用ID可能会正常工作，但不应该这样做......它不会可靠地显示给每个人，如果您稍后想要使用任何脚本，将会导致各种问题。至于使用整个样式表的类，没有意义。你也可以使用*选择器（选择所有的东西）。一堂课的要点是将元素分组在一起。 – 2010-11-12 08:42:26

你不应该有多个ID。基本上，如果有疑问，只需使用课堂。 ID适用于您需要访问的特定元素。所以它就像一个元素的父类型，里面没有html。至少这就是我所做的。

来源

2010-11-11 21:24:55 Matt

我的理念：使用id的一点，使用类很多。

我的意思是只给ID是需要他们对元素：表单元素，主要分节元素，独特的项目

至于班，我尽量提供尽可能多的有用的描述类越好。关键是要确保它们一致和语义。

如果你需要编号在你的编号或类，你可能做错了。取而代之的是列表中标注每一个列表项：

<ul> 
    <li id="item-1"></li> 
    <li id="item-2"></li> 
    ... 
</ul>

只是标记列表本身：

<ul id="special-list"> 
    <li></li> 
    <li></li> 
    ... 
</ul>

，你可以用跟随:nth-child()列表ID（#special-list）列表中访问的任何项目，或者li + li...

来源

2010-11-11 21:26:15 zzzzBov

我不完全同意ID不应该有数字。我经常给元素一个ID，如“user-＃”或“photo-＃”，其中＃表示元素的数据库ID。我发现在执行相关的数据库任务时更容易定位和使用这些元素。在很多情况下做一个$（'＃user-'+ entitiyId）要容易得多。或许，谈到STYLING，你不应该编号编号的项目，而是将它们分类以应用样式。 – Dutchie432 2010-11-12 13:54:46

@ Dutchie432我做同样的事情。我说可能是有原因的。总是会有情况（比如使用预先存在的唯一标识符），其中数字是完全可以接受的。 – zzzzBov 2010-11-12 16:07:43

我认为类是框架，id是收尾。类可以一遍又一遍地被回收，但是ID只能使用一次（我认为大多数浏览器都允许你多次使用它们，这不是很有用）。我主要使用类来组织我的元素：

.red 
{ 
    color: rgb(255, 0, 0); 
} 

.underline 
{ 
    text-decoration: underline; 
} 

#floatRight 
{ 
    float: right; 
    clear: both; 
    padding: 30px; 
} 

#redBorder 
{ 
    border: 2px solid rgb(255, 0, 0); 
}

这将是有效的CSS，如预期的那样。很酷的事情是，你可以使用类多次内的元素，但ID是一次性使用：

<span id="floatRight" class="red underline">Hello!</span>

这将产生文本的红块，多数民众赞成强调和浮动的权利。

<span id="floatRight redBorder" class="red underline">Hello!</span>

这不应使红色边框，因为ID是唯一的一个元素（JavaScript使用，要找到元素）。

身份证就像车牌：他们识别某些车。让人们在多辆车上使用相同的车牌是没有用的，所以id的方式是一样的。你可以唯一地使用它们。

我不知道如果这解释了它......

来源

2010-11-12 03:16:59 Blender

类：一些被视为因共同的属性，特点，质量或特征的形成一群人或事物;类;

ID：IDentification。

class =要样式化的多个实例。

id =要样式化的唯一实例（每个文档一次）。

来源

2010-12-08 06:30:47 Pete

ID的速度更快（带渲染）。只要它是具有独特样式的独特元素，就使用ID。如果你想在别的地方使用完全相同的样式，可以将它设为一个类，以便只需要加载一次。

一个ID是唯一的，因为单词“class”适用于单词的每个定义中的一组内容，所以请使用它。这是CSS中的可重复模式。一个ID标识一个独特的对象，它不会出现在页面的任何其他地方，因为一个类只是你可以拍摄的东西。

来源

2012-11-03 18:33:32 Galadre

类与CSS中的ID（混淆）

回答

相关问题