Question

查看热门＆amp ;;的样式表不受欢迎的网站我发现其中包含div选择器。最下面的四个例子来自热门网站的样式表 Stack Overflow，Github，Youtube ＆amp; 微博：

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

在 ID 或类之后出现div时，这意味着什么？ 例如：

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

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

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

Answer 1

在选择器中更明确，可以更容易地记住HTML结构的内容。几个月后，我可以阅读CSS，根据我的明确规则，我可以自动映射我头脑中的结构，而无需返回HTML。
通过在类或ID之前指定节点名称，规则变得更具体。如果要为具有foo类的div重写.foo { color:black; }，只需执行div.foo { color:red; }。类foo的段落将为黑色，而div将为红色。
如果您想基于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。

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中，＆lt; div＆gt;和＆lt; span＆gt;是通用的容器元素。＆LT; DIV＆GT;是一个块级元素。＆LT;跨度＆GT;是一个内联元素。

大多数其他元素（＆lt; h1＆gt;，＆lt; p＆gt;，＆lt; strong＆gt;等）具有特定的语义含义。使用例如＆lt; p＆gt;这是不好的做法。对于不是段落的东西的元素。但是＆lt; div＆gt;只是一个容器。

如果您需要纯粹装饰性的东西，或将相关元素分组，＆lt; div＆gt;是一个不错的选择。

Answer 4

标签定义了一个分区或一个   HTML文档中的部分。

标签通常用于分组   用于格式化它们的块元素   样式。

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

他们只是明确他们的选择器，这往往是一件好事，因为你在解决要设计风格的元素时更具体。（冲突和无意识造型的可能性较小。）

Answer 5

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

这意味着该规则仅适用于具有类foo或id bar的div元素，并且该规则不适用于具有类foo或id bar的非div元素。

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

这意味着该规则适用于具有类foo或id bar的任何元素内的所有div元素。这称为后代选择器。

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

当id或类之后出现div选择器时，不需要在其后面有另一个选择器。如果存在这样的选择器，则只有当所选元素位于具有id foo的元素内的div元素内时，该规则才会应用于所选元素。

您可能需要在此处阅读您的选择器：

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

'div'选择器的目的是什么？为什么许多开发人员在样式表中使用它？

5 个答案: