css简单标签

使用简单的css制作如下样式标签：

image.png

其中css的伪类选择器:empty注意下：

1.伪类选择器：:empty（该元素只能是空元素，不能包含子节点和文本内容,注意空格也不行）

:empty{
border:2px solid red;
}
<div></div>
<div> </div>

第一个div没有包含任何内容，所以会添加边框，第二个因为包含空格所以不添加边框,感兴趣可以自己百度此选择器。

主要源码如下：

<style type="text/css">
.taglabel{
display: flex;
background:#ffffff;
}
.tag span.mylab:empty {
display: none;
}
.tag span.mylab:empty+span {
display: none;
}
.tag span.mylab+span {
display: inline-block;
border: 11px solid #5dd991;
background: #5dd991;
border-right: white solid 8px;
margin-left: -10px;
}
.tag span.mylab {
display: inline-block;
border: 1px solid #5dd991;
padding: 0px 10px;
font-size: 12px;
border-radius: 19px;
background: #5dd991;
color: white;
font-weight: 500;
height: 22px;
line-height: 21px;
}
</style>
<p class="tag taglabel">
<span tooltip="标签1" class="mylab">消防</span><span></span>
<span tooltip="标签2" class="mylab"></span><span></span>
<span tooltip="标签3" class="mylab">教育</span><span></span>
<span tooltip="标签4" class="mylab">交通</span><span></span>
<span tooltip="标签5" class="mylab">监狱</span><span></span>
<span tooltip="标签6" class="mylab">医疗</span><span></span>
</p>