CSS：aside #sidebar {...}与aside#sidebar{...} [重复]答案

【问题标题】：CSS: aside #sidebar {...} versus aside#sidebar{...} [duplicate]CSS：aside #sidebar {...}与aside#sidebar{...} [重复]
【发布时间】：2018-08-25 09:05:48
【问题描述】：

在 CSS 选择器中，我不明白布局元素和 id（或类）之间的空格的含义：
CSS

aside#sidebar{
    float:right;
    width:30%;
    margin-top:10px;
    color:#ffffff;
}

aside #sidebar{
    float:right;
    width:30%;
    margin-top:10px;
    color:#ffffff;
}

HTML

<aside id="sidebar">
    <h3>What We Do</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>

谢谢

【问题讨论】：

虽然这肯定是一个重复的问题，但您需要在问题中发布您的 HTML。否则，如果尽管有当前的答案，您仍无法理解该概念，我们无法比我们目前的解释更好地解释它。根据我的回答，您对 HTML 的口头解释可能意味着几种不同的结构，因此您应始终发布实际代码，并避免对代码进行口头描述。
由于您的解释，现在我理解了这个概念，我明白为什么您认为这是一个重复的问题。在理解这个概念之前，它在我看来并不是一个重复的问题，因为“空间/no_space”： - 在我的问题中是在布局元素和 id 之间。 - 在上一个问题中是在两个班级之间。我相应地编辑了问题并包含了 HTML。我删除了输出的口头描述。

标签： css

【解决方案1】：

您的选择器完全不同。

在 CSS 中，参数之间的空格表示“inside of”，而没有空格表示“also”。

举个例子。

div {
 padding: 1em; 
 border: solid 1px blue; 
} 


.container.foo:before {
   content: ".container AND .foo"; 
}

.container .foo:before {
   content: ".foo inside any .container"; 
}

<div class = "container foo"> 

  <div class = "middle foo"> 
  
     <div class = "inner foo"> 
     
     </div> 
  
  </div> 

</div>

【讨论】：

【解决方案2】：

当您放置空格时，它是父/子关系，没有它，它就是元素。

这里 aside#sidebar 有效意味着您的 side 元素有一个 id 侧边栏。

aside #sidebar 是当具有 id 侧边栏的元素是旁边元素的子元素时。

【讨论】：