html - CSS : 在 div 元素中设置 span 样式

Question

我的 html 代码片段是

<div id="head">
   <span id="span1"> </span>
   <span id="span2"> </span>
</div>

我没有让我的CSS工作。

#head>#span1{
  //its not working.
}

我也试过

#head1:nth-child(1){
   width: 200px;
   height: 300px;
   background-color: #0000FF;
}

#head1:nth-child(2){
   width: 300px;
   height: 300px;
   background-color: #0000FF;
 }

请帮帮我。

标签： htmlcss

Answer 1

尝试使用#head span全选<span>

#head span{
   width: 200px;
   height: 300px;
   background-color: #0000FF;
   display:inline-block
}

<div id="head">
   <span id="span1">Lorem Ipsum </span>
   <span id="span2">Lorem Ipsum </span>
</div>

尝试使用#head #spanN选择 N<span>

#head #span1{
   width: 200px;
   height: 300px;
   background-color: #0000FF;
   display:inline-block
}

#head #span2{
   width: 200px;
   height: 300px;
   background-color: #FF0000;
   display:inline-block
}

<div id="head">
   <span id="span1">Lorem Ipsum</span>
   <span id="span2">Lorem Ipsum</span>
</div>