代码之家 › 专栏 › 技术社区 › Mani Kant Tiwari

css:在div元素中设置跨度的样式

css html

Mani Kant Tiwari · 技术社区 · 5 年前

我的html sode代码片段是

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

请帮帮我。

2 回复 | 直到 5 年前

Jakub Muda 5 年前

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

Amine KOUIS 5 年前

尝试使用 #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 & GT;

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前