CSS中的类和ID有什么区别？（困惑）

Question

CSS中的类和ID有什么区别？（困惑）

3

我知道我可能会问与其他人相同的问题，但我真的很困惑何时使用ID和class。我已经在Google上搜索了相关内容，并在Stackoverflow上阅读了一些发布的问题，但仍然有疑虑。我明白ID只能在页面中使用一次，而class可以在一个类中使用多次。

下面是我练习过的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;
}

And html here:

<!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和class呢？

编辑：这张图片怎么样？这是你定义何时使用ID和Class的方式吗？ alt text

- James1

8个回答

2

类：由于共同属性、特征、品质或特点而被视为形成群体的许多人或物；种类；

ID：身份识别。

class = 多个实例可以进行样式设置。

id = 唯一实例可以进行样式设置（每个文档只能设置一次）。

- Pete

1

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

当你的CSS代码写成：

#searchBox{...}

你的意思是会有一个名为“searchBox”的项目，而这就是你想要它的样式。

<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>

- Dutchie432

3

你使用 redBorder 这个词汇在语义上让我感到不适。类应该永远不会指定样式...（当然也有一些少数例外情况）。 - zzzzBov

我很想听听你的理由。 - Dutchie432

HTML是一种语义化标记语言。任何懂得HTML的人都应该能够阅读标记并理解其内容。对于盲人来说，使用“redBorder”是毫无意义的，而使用“error”则具有意义。 - zzzzBov

我不同意你的评估。一个错误div可能有一个class="redBorder boldFont redFont" ...每个与特定属性相关联。我认为“redBorder”相当自我解释，当以我所示的方式使用时，比称为“error”的类更具说明性。 - Dutchie432

1

我倾向于使用ID来定位元素，或者在需要通过JavaScript选择特定元素的情况下使用。类更多地用于将样式应用于您将反复使用的元素。

在您的情况下，像标题和导航这样的元素应该是一个ID。此外，请确保不要将类命名为与ID相同，例如您的nav-bar：

<div id="nav-bar">

<ul class="nav-bar">

- Gregg B

1

标识符(IDs)应该始终是唯一的，而类(class)则不需要。就这么简单。其他任何东西都只是个人偏好。

话虽如此，我认为尽可能使用子选择器会更加整洁。所以，不要使用.info2-link，而是使用#info2 a。这样你就不需要给每个元素都添加类了。

- Nathan MacInnes

如果类可以多次使用，那么我可以将类用于整个样式表吗？我发现我也可以多次使用ID，就像我上面所做的那样。我认为如果我将ID用于整个样式表，它仍然可以正常工作。 - James1

在浏览器中，多次使用ID可能会正常工作，但你不应该这样做...它不会可靠地显示给每个人，如果你以后想要使用任何脚本，它会引起各种问题。至于为整个样式表使用类，没有意义。你可以使用*选择器（选择所有内容）。类的目的是将元素分组在一起。 - Nathan MacInnes

1

你不应该有多个ID。基本上当你不确定时，只需使用class。ID适用于需要访问的特定元素。因此，它将像父类型的元素，其中没有HTML内容。至少这就是我做的。

- Matt

0

我认为类是框架，而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就像车牌：它们标识特定的汽车。让人们为多辆汽车使用相同的车牌是无用的，所以id也是如此。您要唯一地使用它们。

我不确定这是否解释清楚了...

- Blender

0

ID更快（在渲染方面），请注意。每当遇到带有独特样式的唯一元素时，请使用ID。如果你想在另一个地方应用完全相同的样式，请将其设为类，这样它只需要加载一次。

ID是唯一的，而“class”一词适用于该词的每个定义中的某些组，因此请按此使用它。这是CSS中可重复使用的模式。ID标识在页面上没有任何其他位置出现过的唯一对象，而类只是可以随意添加到任何东西上的东西。

- Galadre

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zzzzBov · Accepted Answer

我的理念是：少用id，多用class。

我的意思是只给那些需要的元素添加id，例如表单元素、主要分区元素和独特的项目。

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

如果你需要在id或类中使用数字，那么你可能做错了。不要为列表中的每个列表项都标记：

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

仅对列表本身进行标记：

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

您可以使用列表ID (#special-list) 后跟 :nth-child() 或 li + li... 访问列表中的任何项目。