когда использовать Div # idname или #idname для CSS

Question

Для стилизации кода:

<div id="top-header"> 
     <div id="logo"> 
      <a href="http://example.com/>logo link</a> 

     </div> 
</div> 

Когда делает одно использование div#logo{} и когда делает один использовать #logo{}?

Answer 1

div#logo будет применяться только к элементам с идентификатором logo, которые дивы, в то время как только #logo будет применяться к любому элементу с идентификатором logo. Однако, учитывая, что у вас не должно быть элементов с одним и тем же идентификатором на одной странице, этот конкретный случай не должен иметь никакого значения.

Это гораздо полезнее, когда стилизация класса вместо идентификатора, например:

<div class="top-header"> 
    <div class="logo"> 
     <a href="http://example.com/>logo link</a> 

    </div> 
    <span class="logo">Hello</span> 
</div> 

Здесь div.logo{} не будет применять стиль к размаху.

Answer 2

Поскольку id является уникальным, #logo{ ... } будет достаточно.

При использовании классов, вы можете быть более гибкими, например:

CSS:

.class1 { 
    color: red; 
} 

span.class1 { 
    color: blue; 
} 

HTML:

<h1 class="class1">heading</h1> 
<a class="class1">link</a> 
<span class="class1">span</span> 

В приведенном выше примере, заголовок и текст ссылки будут быть красным. Пролет, однако, будет синим.

Answer 3

ID всегда уникальны.

Нет необходимости добавлять element селектор перед удостоверением личности.

Вот почему вам следует избегать использования одинаковых идентификаторов со страницей. http://jsfiddle.net/jDxS8/1/ Когда вы пытаетесь добавить стили на лету, вы не можете.

EDIT: Я недооценил Mansfield «s комментарий class="logo", как id извините за это.

Answer 4

Единственный раз, когда div#logo полезно, если вы хотите, чтобы выбрать один элемент, который имеет идентификатор logo и является <div> или выберите никаких элементов, если такая <div> не существует. Этот прецедент подразумевает, что вы не знаете до тех пор, пока не будет определено, будет ли #logo идентификатором <div> или каким-либо другим элементом HTML, например <span>.

Если вы просто хотите выбрать элемент с идентификатором #logo, просто используйте #logo.

Answer 5

ID должен быть уникальным значением на веб-странице с 1000 000 разделов, содержащих 1000 000 идентификаторов, каждый Div должен иметь конкретный идентификатор, однако они могут иметь один и тот же класс.

Пример: рассмотрите это как классную комнату в школе с 1000 учеников. У каждого ученика есть свой собственный идентификатор студента, но все они имеют один и тот же класс.

так, если студенты будут дивы, студент с идентификационным номером (#) 567, будет классифицирована как это в CSS:

Предположив это:

 <student id="1" class="Grade_03">...</student> // as in <div id="1" class="Grade_03"></div> 

    <student id="2" class="Grade_01">...</student> 
    <student id="3" class="Grade_02">...</student> 
    <student id="n" class="Grade_03">...</student> 

    Student#567{ 
    Math:90%; 
    English:80%; 
    } 

//Or: 

    #567{ 
    Math:90%; 
    English:80%; 
    } 

, но если вы хотите адрес все студенты в этом классе, скажем Grade_03:

Student.Grade_03{ 
TeacherName:"Mr_Smith"; 
} 

Высказывание Student#567 или #567 и направит к тому же студенту, если вы не дублируется ул udent ID.

Answer 6

Думайте об этом как «I только хотите выбрать элемент с этим идентификатором, если это будет div.». В 99% случаев с использованием селектора id достаточно, но если элемент добавлен динамически, и вы знаете, какой идентификатор он будет иметь, но не тот элемент, который он будет, вы должны сделать это таким образом.