CSS :: Разница между .className и div.className

Question

Я пишу HTML элемент, как показано ниже ::

<div class="box"> Foo box </div> 

и писать CSS, как

.box { 
    width: 400px; 
    height: 40px; 
    color: red; 
    text-align: center; 
} 

or 

div.box { 
    width: 400px; 
    height: 40px; 
    color: red; 
    text-align: center; 
} 

Я хочу спросить, что как оба CSS для класса ящиков отличается друг от друга.

Answer 1

Разница заключается в том, что в первом классе вы говорите, что все элемент (div, p, span ...) с классом box имеют этот атрибут. Как это:

<span class="box">test</span> 
<div class="box">test</div> 
<p class="box">test</p> 

Второй класс означает, что только DIV с классом box имеет этот атрибут

Только это элементы получают второй класс:

<div class="box">test</div> 

selector перед классом указать, какой тип элементов может принимать этот класс

Answer 2

.box означает любой элемент, имеющий класс b вол.

Пример:

<div class="box">...</div> 
<section class="box">...</section> 
<span class="box">...</span> 

div.box означает только Div элемент, имеющий класс коробку.

Пример:

<div class="box">...</div> 

Answer 3

Одно очень важное различие между div.box и просто .box в чем-то называется selector specificity. Это набор правил, который определяет, какой селектор получает больше веса, как только браузер начнет проходить через все селекторы, которые потенциально могут влиять на определенный элемент.

Что это означает, что легко демонстрируется в следующем примере (DEMO)

У нас есть простой DIV, содержащий некоторый текст.

<div class="box"> 
    Zarro boogs found! 
</div> 

Теперь мы добавим некоторые селектора CSS к примеру.

div.box { 
    padding:0.8em; 
    background: #bd0000; 
    color: #fff; 
} 
.box { 
    color: #bd0000; 
} 

Одним из самых основных правил CSS является то, что селекционеры могут быть пересмотрены таким образом, что все, что определение приходит последним и имеет влияние на тот или иной элемент его тот, который будет использоваться (единственное исключение при использовании !important, который всегда имеет приоритет).

Теперь в приведенном выше примере переопределяется. box Селектор классов должен фактически скрывать текст, но вместо этого его все еще видно. Как это возможно, если мы говорим, что последние правила всегда имеют приоритет?Это связано с тем, что правило div.box имеет более высокую специфичность, чем .box, поскольку оно фактически получает точки для размещения как элемента (div), так и селектора классов (.box) в его объявлении селектора (div.box).

Конечно, правило div.box применяется только к элементу div, но поскольку селектор классов часто используется для повторного использования, существует множество ситуаций, когда они используются в div.

Хотя правила в официальной спецификации W3 не так уж трудно понять, их иногда очень трудно запомнить. Вот почему я хотел бы рекомендовать отличную статью о специфичности селектора CSS, которая может быть найдена here.

На мой взгляд, специфичность селектора - это, безусловно, самая важная вещь, которую нужно освоить, когда дело доходит до отслеживания проблем наследования с таблицами стилей CSS.