css – ‘div’选择器的目的是什么,为什么这么多开发人员在他们的样式表中使用它？

从流行的&不受欢迎的网站我发现其中包含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下的任何直接跨度都是蓝色的.

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了解更多问题.

原文地址：https://www.jb51.cc/css/214160.html