Класс против ID в css (путаница)

Question

Я знаю, что я могу задавать тот же вопрос, что и другие, которые задают, но я действительно смущен, когда использовать ID и класс. Я пробовал об этом и читал некоторые опубликованные вопросы о Stackoverflow здесь, но все еще сомневаюсь в этом. Я понимаю, что идентификатор может быть использован только один раз на странице и класс может быть использовать более чем один в классе

Ниже здесь стиль 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, так как я использую кучи идентификаторов. Пожалуйста, ребята, скажите мне, когда/как использовать идентификатор и класс? Спасибо заранее!

Редактировать: Как об этом изображении? заключается в том, как вы определяете, когда использовать идентификатор и класс?

Answer 1

Я обычно использую идентификаторы для позиционирования или в случае, если мне нужно будет выбрать конкретный элемент через javascript. Классы - это больше для применения стилей к вещам, которые вы будете повторно использовать снова и снова.

В вашем случае такие вещи, как заголовок и навигация, должны быть ID. Кроме того, чтобы не назвать класс такой же, как ID, как в вашем навигационном-баре:

<div id="nav-bar"> 

<ul class="nav-bar"> 

Answer 2

Идентификатор относится к определенному элементу, в то время как 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> 

Answer 3

идентификаторы всегда должны быть уникальными, классы не должны быть. Просто как тот. Все остальное - предпочтение.

Сказав это, я думаю, что лучше использовать детские селекторы как можно больше. Поэтому вместо .info2-link используйте #info2 a. Таким образом, вам не нужно добавлять классы ко всему.

Answer 4

У вас не должно быть нескольких идентификаторов. В основном, если у вас есть сомнения, просто используйте класс. Идентификаторы хороши для определенных элементов, к которым вам нужно получить доступ. Таким образом, он будет похож на родительский тип элемента, где внутри нет html. По крайней мере, это то, что я делаю.

Answer 5

Моя философия: немного используйте id, используйте классы много.

Что я имею в виду, что только дать идентификаторам к элементам, которые нуждаются в них: элементы формы, первичные элементы секционирования, уникальные предметы

Что касается классов, я стараюсь, чтобы обеспечить, как много полезных описательных классов, как это возможно. Ключ должен убедиться, что они являются последовательными и семантическими.

Если вам нужны номера в ваших идентификаторах или классах, вы, вероятно, ошибаетесь. Вместо того, чтобы обозначать каждый элемент списка в списке:

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

просто маркировать сам список:

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

, как вы можете получить доступ к любому элементу в списке, используя список идентификаторы (#special-list), а затем :nth-child(), или li + li...

Answer 6

Я думаю о классах в качестве рамки, а 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, как и ожидалось. Самое замечательное в том, что вы можете использовать классы несколько раз внутри элемента, но идентификаторы являются одноразовыми:

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

Это будет производить красный блок текста, подчеркнутые и плавающий вправо.

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

Это не сделать красную границу, поскольку идентификаторы являются уникальными для одного элемента (JavaScript использует его для поиска элементов).

Id - это как номерные знаки: они идентифицируют определенные автомобили. Было бы бесполезно, если бы люди использовали одинаковые номерные знаки для нескольких автомобилей, поэтому идентификаторы одинаковы. Вы используете их однозначно.

Я не уверен, что это объясняет ...

Answer 7

Класс: ряд людей или вещей, рассматриваемых как формирование группы по причине общих признаков, свойств, качеств или признаков; своего рода;

ID: Идентификация.

класс = несколько экземпляров для стилей.

id = уникальный экземпляр для стилизации (один раз для каждого документа).

Answer 8

ID - это быстрее (с рендерингом). Используйте идентификатор, когда это уникальный элемент с уникальным стилем. Если вы хотите применить тот же стиль в другом месте, сделайте его классом, чтобы его нужно было загружать только один раз.

Идентификатор уникален, поскольку слово «класс» относится к группе чего-то во всех определениях слова, поэтому используйте его как таковое. Это повторяемый шаблон в CSS.Идентификатор идентифицирует уникальный объект, который не появляется нигде на странице, где, поскольку класс - это просто то, что вы можете нанести на что угодно.