'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;}

我发现我可以使用div选择器设计功能完备的CSS样式表,所以问题是:

什么是div选择器的功能？
&
为什么很多开发人员使用它？

编辑:

要明确的是,在使用div选择器时,div在id或类之前出现的含义是什么？ 例如:

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

div在身份或课程出现后,它意味着什么？ 例如:

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

当div选择器出现在id或类之后,它必须在它之后出现另一个选择器吗？ 例如:

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

Answer 1

1. 在选择器中更明确地使得更容易记住HTML结构是什么样的.几个月后,我可以阅读CSS,并根据我的显式规则,我可以自动映射我的头部结构,而无需回到HTML.
2. 通过在类或ID之前指定节点名称,规则变得更具体.如果你想覆盖.foo { color:black; }一个类为foo的div,那就去做吧div.foo { color:red; }.有一类的段落foo是黑色的,而div则是红色的.
3. 如果要基于HTML结构提供不同的css规则,它会很有用.在下面的规则中,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匹配id为foo的div.
2. div #foo div表示#foo的任何div后代.
3. 不,它没有.

有关更多问题,请阅读http://www.w3.org/TR/CSS2/selector.html#pattern-matching.