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

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

EDIT:

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

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

и что значит div появляется после id или класс? для пример:

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

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

#foo div span { color:black; }
#foo div p { color:black; }
9
css css-selectors

5 ответов

  1. быть более явным в вашем селекторе облегчает запоминание того, как выглядит структура HTML. Через несколько месяцев я могу читать CSS и, основываясь на моих явных правилах, я могу автоматически отображать структуру в моей голове, не возвращаясь к HTML.
  2. , указав имя узла перед классом или ID, правило становится более конкретным. Если вы хотите переопределить .foo { color:black; } для div, который имеет класс foo, просто сделайте div.foo { color:red; }. Абзацы, которые имеют класс foo будет черным, в то время как divs будет красным.
  3. это может быть полезно, если вы хотите обслуживать различные правила css на основе структуры HTML. В правилах ниже, любая span внутри 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/

EDIT:

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

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

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

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

в HTML и XHTML

и являются общими элементами контейнера.
- элемент блочного уровня. является встроенным элементом.

большинство других элементов (

,

, и т. д.) имеют специфические смысловые значения. Это плохая практика использовать, скажем, элемент

для чего-то, что не является абзацем. Но

- это просто контейнер.

Если вам нужно что-то чисто декоративное или группировать связанные элементы,

- хороший выбор.
2

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

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

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

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

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

это означает, что правило применяется только к элементам div с классом foo или id bar, и правило не будет применяться к элементам non-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

1