从流行的&不受欢迎的网站我发现其中包含div选择器.最下面的四个例子是从流行网站Stack Overflow,Github,Youtube&推特：
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出现在id或class后,这意味着什么？
例如：
.foo div { color:black; }
#bar div { color:gray; }
当div选择器出现在id或class之后,它必须有另一个选择符出现在它之后？
例如：
#foo div span { color:black; }
#foo div p { color:black; }
解决方法
>在您的选择器中更加明确地使您更容易记住HTML结构的样子.几个月下来我可以读取CSS,并基于我的明确的规则,我可以自动映射我的头部结构,而不返回到HTML.
>通过在类或ID之前指定节点名称,规则变得更具体.如果你想覆盖.foo {color：black; }对于一个有一类foo的div,只要做div.foo {color：red; }.具有一类foo的段落将是黑色的,而divs将是红色的.
>如果您要根据HTML结构提供不同的CSS规则,这可能很有用.在下面的规则中,div中的任意跨度都是红色的. #foo下的任何直接跨度都是蓝色的.
>通过在类或ID之前指定节点名称,规则变得更具体.如果你想覆盖.foo {color：black; }对于一个有一类foo的div,只要做div.foo {color：red; }.具有一类foo的段落将是黑色的,而divs将是红色的.
>如果您要根据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/
编辑：
> div#foo匹配一个id为foo的div.
> div#foo div表示#foo的任何div后代.
>不,不.
请阅读http://www.w3.org/TR/CSS2/selector.html#pattern-matching了解更多问题.
