html css div span 如下效果如何实现啊?
html中代码<body><divclass="outside"><divclass="title"><spanclass="active">1</span><spanc...
html中代码
<body>
<div class="outside">
<div class="title">
<span class="active">1</span>
<span class="active">2</span>
<span class="active">3</span>
</div>
</div>
</body>
css中代码：
.outside{
overflow:hidden;
background:#fff;
width:600px;
border:1px solid #666;
position:absolute;
top:21px;
left:12px;
}
.outside .title{ background:#666; padding-bottom:0px; overflow:hidden;}
.outside .title span{ margin-left:10px; display:inline; margin-right:15px; padding:0px 15px; height:35px; line-height:35px; float:left; }
.outside .title span .active{background:#FFF; border:1px solid #666; border-bottom:1px white solid;}
运行后显示如下效果：
但是我想要的效果是
这个 .outside .title span .active 效果怎么没有出来呢？ 展开
<body>
<div class="outside">
<div class="title">
<span class="active">1</span>
<span class="active">2</span>
<span class="active">3</span>
</div>
</div>
</body>
css中代码：
.outside{
overflow:hidden;
background:#fff;
width:600px;
border:1px solid #666;
position:absolute;
top:21px;
left:12px;
}
.outside .title{ background:#666; padding-bottom:0px; overflow:hidden;}
.outside .title span{ margin-left:10px; display:inline; margin-right:15px; padding:0px 15px; height:35px; line-height:35px; float:left; }
.outside .title span .active{background:#FFF; border:1px solid #666; border-bottom:1px white solid;}
运行后显示如下效果：
但是我想要的效果是
这个 .outside .title span .active 效果怎么没有出来呢？ 展开
2个回答
展开全部
楼上正解；如果带有html的原有标签 如 p a span em等的时候，如果要按继承方式写的话，其前面不有有空格。
应该去掉“.active”前的空格，与span连着写；.outside .title span.active
应该去掉“.active”前的空格，与span连着写；.outside .title span.active
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css一个小错误，.outside .title span.active 这里的span后面不能有空格
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
