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;
 }

请帮帮我。

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>

Answer 2

内联元素中的

<span>，因此您需要设置display:block来进行适当的样式设置（以防需要宽度和高度）。如果您有ID，则在CSS中所需要做的就是定位这些ID。

#span1{
   width: 200px;
   height: 300px;
   background-color: yellow;
   display:block
}

#span2{
   width: 300px;
   height: 300px;
   background-color: red;
   display:block
 }

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

CSS：在div元素中设置跨度

2 个答案: