Question

在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>

谢谢

Answer 1

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

aside#sidebar的工作原理意味着您的aside元素具有id侧边栏。

aside #sidebar是ID侧边栏的元素是除元素之外的子元素。

Answer 2

您的选择器完全不同。

在CSS中，参数之间的空格表示“内部”，而没有空格表示“也”。

举个例子。

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>

CSS：aside #sidebar {...}与aside＃sidebar {...}

2 个答案: