类中的后代选择器答案

【问题标题】：Descendant selectors in a class类中的后代选择器
【发布时间】：2011-05-25 21:30:11
【问题描述】：

从这个Selectutorial 我可以很好地理解什么是基于元素/标签的后代选择器，它们如何工作以及为什么工作以及用于什么目的。

但后来我遇到了某些网站，它们为锚点 <a> 定义了一个类名，该类名由多个用空格分隔的名称组成，例如

<a class="samename nav_item samename" href="/messages/?refid=7"> Text </a>

后来我发现这些也叫“descendant selectors”——还是叫descendant combinators？

这是我停止理解的地方：

任何提示或指向我可以了解更多关于这种第二种类型的地方的提示或指针将不胜感激。

编辑：下面的回复有助于整理事情，尤其是在适当的术语方面。我将尝试总结我目前的理解——首先尝试以各自的方式回答上述问题，然后列出一些见解，希望它可以帮助像我这样的未来 css-laymen：

见解（如果发现错误，请更正）：

尽管写了什么 w3schools，一个类（名称）是不是选择器！选择器只能是 HTML 元素。
但是，CSS rule 可以参考到一个 HTML 元素（或一组 HTML 元素）按类名，使用 .classname 表示法。这符号被一些人称为 “the class selector”和这个是我困惑的根源。它仅仅意味着它可以用来选择任何具有 attribute 类的 HTML 元素。
CSS 规则也可以引用 HTML 元素（或一组 HTML 元素）按元素 id，使用 #elementid 符号。这是个完全不同的主题，但因为这个符号被一些人引用作为“the id selector” 这可能是一个来源也很混乱，所以很简短这里提到了。
在 HTML 中，“类”是一个属性。在 CSS，它是一个“selector aggregator”，用于选择任何 HTML 元素有那个类属性。
到目前为止，最好的 CSS 教程是 Selectutorial。

【问题讨论】：

嗯，据我所知，那些不被称为“后代选择器”......
关于你的编辑，属性选择器（我看到你做了一个链接）与后代组合器完全不同。
@BoltClock 感谢一百万和更多 ++ 用于更正术语。我刚刚从你那里得知这些被称为descendant combinators，而不是“后代选择器”。另外，您能否推荐一个更好的学习 CSS 的资源，它不是正式规范？光看grammar就头疼...
我的大部分 CSS 学习来自于阅读网络上的杂项文章和大量实践 :)
只是为了澄清您的观点 #3 - 在 CSS 中，您可以参考以下任何内容（并使用其中的几个更具体）： HTML 元素（例如 p、a 等) 没有额外的符号、类（前面有句点）和 ID（前面有井号）

【解决方案1】：

只有一个 CSS 后代选择器，那就是空格字符：

E F /* Selects any F that descends from (or is contained by) an E */

空格分隔的类名只是多个由空格分隔的类，在一个 HTML class 属性中。 class 属性不是选择器，实际上甚至不是 CSS 的一部分。

然而，在一些相关的说明中，每个元素列出多个类的一种用途是，您可以链接类选择器，这样只有具有 all 列出的类的元素被匹配，而不是那些有一个或更少的课程。例如：

.samename.nav_item /* Selects only elements that have both classes */

至于为什么samename 在您给定的 HTML 中重复，我不知道。这与只有一个 samename 类相同。

【讨论】：

强制性“IE6 不能正确解释多个类选择器”警告出现在这里。
@BoltClock 感谢您迄今为止的澄清。我知道class 属性不是选择器，但在this reply 中使用的是选择器。同样在您自己的回复中，您指的是“链类选择器”。你能澄清一下吗？谢谢和+2。
@BoltClock 同样在this CSS tutorial 中，class 属性肯定被称为选择器。我现在真的很困惑......
@ef2011：该 SO 答案中的选择器是指在 JavaScript 库函数中使用 CSS 选择器，这与 class 属性不同。在那篇文章中，每个类名都以一个点为前缀，并用空格分隔。这意味着空格用作后代选择器，但同样是 CSS 选择器语法，而不是 HTML 属性。希望您现在更清楚区别！
@ef2011：这就是你的 W3Schools。关闭选项卡，将其从浏览器历史记录中删除并忘记它。这是一个非官方的来源，而且是粗制滥造的。这些被称为属性，而不是选择器，句号。

【解决方案2】：

在你的例子中，a 标签实际上有几个不同的类（其中一个被列出两次，出于某种原因）。

在 CSS 代码中，我们会使用空格来分隔后代选择器，但在 HTML 中，它只是让我们将多个类放在同一组括号中。

【讨论】：