Какова цель селектора div и почему многие разработчики используют его в своих таблицах стилей?

Question

Просматривая таблицы стилей популярных и непопулярных сайтов, я обнаружил включенный в них селектор div.Четыре нижних примера были взяты из таблиц стилей популярных сайтов Stack Overflow, Github, Youtube & Twitter :

div.form-item-info{padding:4px 0 4px 4px;width:80%;color:#777;}


.searchFooterBox div span.smallLabel{font-size:14px}


#readme.rst div.align-right{text-align:left;}


.hentry .actions>div.follow-actions{visibility:visible;text-align:left;}

Я считаю, что могу проектироватьполностью функционирующие таблицы стилей CSS без использования селектора div, поэтому вопрос:

Что такое функция селектора div?
&
Почемутак много разработчиков используют это?

РЕДАКТИРОВАТЬ:

Чтобы было ясно, при использовании селектора div, что это означает, когда divпоявляется перед id или class ? Например:

div.foo { color:black; }
div#bar { color:gray; }

И что это значит, когда div появляется после id или class ? Например:

.foo div { color:black; }
#bar div { color:gray; }

Когда селектор div появляется после идентификатора или класса, должен ли после него появляться другой селектор? Например:

#foo div span { color:black; }
#foo div p { color:black; }

Answer 1

1. Будучи более явным в вашем селекторе, легче запомнить, на что похожа структура HTML. Месяцы спустя я могу читать CSS и, основываясь на своих явных правилах, могу автоматически отображать структуру в моей голове, не возвращаясь к HTML.
2. Указав имя узла перед классом или идентификатором, правило становится более конкретным. Если вы хотите переопределить .foo { color:black; } для div, который имеет класс foo, просто наберите div.foo { color:red; }. Абзацы с классом foo будут черными, а div - красным.
3. Это может быть полезно, если вы хотите обслуживать различные правила CSS, основанные на структуре HTML. В приведенных ниже правилах любой промежуток внутри div - красный. Любой прямой диапазон под #foo синий.

CSS:

#foo div span { color:red; }
#foo span { color:blue; }

HTML для этого:

<div id="foo"><span>blah</span> <div><span>blah</span></div> </div> 

Живая демоверсия, с которой вы можете поиграть: http://jsfiddle.net/6dw2r/

РЕДАКТИРОВАТЬ:

1. div # foo соответствует div с идентификатором foo.
2. div # foo div означает любые потомки div # foo.
3. Нет. Это не так.

Пожалуйста, прочитайте http://www.w3.org/TR/CSS2/selector.html#pattern-matching для дальнейших вопросов.

Answer 2

div.form-item-info{...} // all div elements that have class~=form-item-info

.form-item-info{...}  // all elements that have class~=form-item-info

Answer 3

В HTML и XHTML

и являются общими элементами контейнера. является элементом уровня блока. является встроенным элементом. Большинство других элементов (, , и т. Д.) Имеют специфические смысловые значения. Плохо практиковать, скажем, элемент для чего-то, что не является абзацем. Но это просто контейнер. Если вам нужно что-то чисто декоративное или для группировки связанных элементов, - хороший выбор.

Answer 4

div.foo { rule }
div#bar { rule }

Это означает, что правило применяется только к элементам div с классом foo или id bar, и правило не будет применяться к элементам, не относящимся к div, с классом foo или id bar.

.foo div { rule }
#bar div { rule }

Этоозначает, что правило применяется ко всем элементам div внутри любого элемента с классом foo или id bar.Это называется селектором потомков .

#foo div span { rule }
#foo div p { rule }

Когда селектор div появляется после идентификатора или класса, не обязательно иметь другой селектор после него.Если есть такой селектор, правило будет применяться к выбранным элементам, только если они находятся внутри элемента div, который находится внутри элемента с идентификатором foo.

Вы можете прочитать о ваших селекторах здесь:

http://www.w3.org/TR/CSS2/selector.html

Answer 5

Тег определяет разделение или раздел в HTML-документе.

тег часто используется для группировки блок-элементы для их форматирования стили.

http://www.w3schools.com/tags/tag_div.asp

Они просто говорят о своих селекторах, что, как правило, хорошо, так как вы более конкретны при обращении к элементам, которые нужно стилизовать. (Меньшая вероятность конфликтов и непреднамеренное моделирование.)