Css '的目的是什么；分区'；选择器，为什么那么多开发人员在他们的样式表中使用它？

通过查看流行和不受欢迎的网站的样式表，我发现其中包含

div

选择器。下面四个示例取自流行网站Stack Overflow、Github、Youtube和Twitter的样式表：

我发现我可以使用

div

选择器设计功能齐全的CSS样式表，因此问题是：

什么是

div

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

编辑：

需要明确的是，当使用

div

选择器时，如果

div

出现在id或类之前，这意味着什么？ 例如：

当

div

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

当

div

选择器出现在id或类之后时，它是否必须在其后出现另一个选择器？ 例如：

在选择器中更加显式，可以更容易地记住HTML结构是什么样的。几个月后，我可以阅读CSS，根据我的明确规则，我可以自动在脑海中映射结构，而无需返回HTML

通过在类或ID之前指定节点名称，规则变得更加具体。如果要为具有foo类的div重写

.foo{color:black；}

，只需执行

div.foo{color:red；}

。具有

foo

类的段落将为黑色，而div将为红色

如果您希望基于HTML结构提供不同的css规则，那么它会很有用。在下面的规则中，div中的任何跨度都是红色的。

#foo

下的任何直接跨距均为蓝色

CSS:

html格式：

<div id="foo"><span>blah</span> <div><span>blah</span></div> </div> 

废话

您可以使用的现场演示：

编辑：

div#foo匹配id为foo的div

div#foo div指#foo的任何div后代

不，没有

更多问题请阅读

标记定义了一个分区或一个 HTML文档中的节

标签通常用于分组 块元素以使用 风格

他们只是明确地说明了他们的选择器，这往往是一件好事，因为在处理要设置样式的元素时，您会更加具体。（冲突和意外样式的可能性较小。）

在HTML和XHTML中，并且是通用容器元素。是块级元素。是一个内联元素

大多数其他元素（，，等）都有特定的语义。比如说，对非段落的内容使用元素是不好的做法。但它只是一个容器

如果你需要的东西是纯粹的装饰，或组相关的元素，是一个很好的选择

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 }

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

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

---

这四个网站中哪一个不受欢迎？我只是说我在受欢迎和不受欢迎的网站中找到了div选择器。我并没有具体说明我的例子是受欢迎还是不受欢迎。此外，这有点离题。不过，很抱歉把你弄糊涂了。我会编辑它。@j3m关于这个问题，令人困惑的是CSS中的div选择器指的是HTML中的div标记。更一般的问题是：为什么网站在CSS选择器中指定HTML元素，而不是简单地依赖于类和ID？@George right但当“div”出现在CSS样式表中时，在这种上下文中它不是CSS选择器吗？@j3m是的，它是元素选择器，而不是类或ID选择器。这取决于应用CSS的HTML源中是否存在上述元素。类似地，类或ID需要存在于HTML源中，以便CSS应用于它们。基本区别在于开发人员/设计人员确定源代码中类/ID的名称和存在性。但是，对于HTML元素，名称由标准决定，只有它们在源代码中的存在由开发人员/设计师决定。虽然您所说的是有效的，但您实际上没有回答他的问题。他问的是选择器中使用的

div

。我的答案怎么不相关？@meder所以第一个“废话”将被涂成“蓝色”，第二个“废话”将被涂成“红色”。正确吗？@meder同样，在我包含的4个示例中，“div”选择器出现在类“div.form-item-info”之前。你能像‘div#foo span’那样写出你的例子吗？你能写我的例子吗，比如“.formiteminfodiv”？是的，你可以在id或类之前指定节点名。我想问题是为什么人们声明div#header而不是just#header。不是什么DIV。我真的很惊讶，这个标签在HTML5中是新的。它在XHTML 1.0/1.1或XHTML 4.01中不存在。@Paul Schreiber我指的是CSS样式表中经常包含的“div”选择器，而不是html.oops中包含的“div”标记。误读。但是：div#header比仅仅#header具有更高的CSS特异性得分。而且：你可能有一个div#header和一个ul#header（或诸如此类的东西）。从技术上讲，你不应该有，因为ID应该是唯一的。我很抱歉，我觉得我在欺负你。/在解释t方面做得很好

#foo div span { color:red; }
#foo span { color:blue; }

<div id="foo"><span>blah</span> <div><span>blah</span></div> </div> 

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

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

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

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

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