css - 两种声明样式规则的方式之间的空格有什么区别

Question

这两个声明之间的功能差异是什么：

#someID.SomeClass a

和

#someID .SomeClass a

所有的格式差异都是在#someID和之间插入一个空格.SomeClass。当我看教程时，人们有时会做空间，有时不会，所以我不确定这是否意味着什么或只是代码设计。

谢谢！

score 6 · Accepted Answer

#someID.SomeClass选择具有 idsomeID 和class的元素SomeClass。

#someID .SomeClass选择具有类的元素，SomeClass 并且其父元素的 id 为someID.

score 5 · Accepted Answer

#someID.someClass a

会选择上面的 eh 元素a。但它不会选择下面示例中的元素。

这表明someClass是具有 id 的相同元素的类someID。然后包含在该元素中（向下任意数量的级别）将是 element a。

例子：

<div id="someID" class="someClass">
  ...
  <a ...> </a>
</div>

#someID .someClass a

这表明您有一个带有 id 的元素，someID然后向下一些级别有一个 class 元素，someClass最后，再向下一些级别，您有 element a。

例子：

<div id="someID">
  ...
  <div class="someClass">
    ...
    <a ...> ... </a>
  </div>
</div>

将选择a上面的元素。

score 1 · Accepted Answer

这是来自 w3.org - 非常有趣的阅读（示例）

要匹配“类”值的子集，每个值必须以“.”开头。

例如，以下规则匹配任何 P 元素，其“类”属性已被分配一个空格分隔值列表，其中包括“田园”和“海洋”：

p.marine.pastoral { color: green }

此规则在 class="pastoral blue aqua marine" 时匹配，但在 class="pastoral blue" 时不匹配。

笔记。CSS 赋予“类”属性如此强大的功能，以至于作者可以想象设计自己的“文档语言”基于几乎没有相关表示的元素（例如 HTML 中的 DIV 和 SPAN）并通过“类”属性分配样式信息. 作者应该避免这种做法，因为文档语言的结构元素通常具有公认和接受的含义，而作者定义的类可能没有。

注意：如果一个元素有多个类属性，在搜索类之前，它们的值必须用空格连接。然而，到目前为止，工作组还没有意识到可以达到这种情况的任何方式，因此这种行为在本规范中是明确的非规范性的。

score 1 · Accepted Answer

#someID.SomeClass a表示元素下的 a 标签，其中 someID 作为 id ，同时SomeClass 表示类，而#someID .SomeClass a表示某个元素下的标签，带有“SomeClass”，它本身位于另一个元素下，带有“someID”

4 回答 4