如何在非空时将填充放在SPAN上

Question

我有以下HTML源代码：

<span id="ctl00_SiteMap1" class="breadcrumb hidOverflow">
    <span>
        <a title="Homepage" href="/Default.aspx">Home</a>
    </span>
    <span></span>
    <span>
        <a title="Basic Reporting Samples" href="/find_provider.aspx">Provider</a>
    </span>
    <span></span>
    <span>Profile</span>
</span>

以下CSS：

.breacrumb {
    font: 10px 'Verdana', 'Graduate', 'Arial', 'Helvetica', 'sans-serif';
    height: 30px;
    line-height: 30px;
    color: #9b9b9b;
    width: 100%;
    overflow: hidden;
    font-weight: bold;
}
.breadcrumb li {
    list-style-type: none;
    float: left;
    font-weight: bold;
}
.breadcrumb a {
    height: 30px;
    line-height: 30px;
    display: inline-block;
    background-image: url('../theImages/breadCrumbArrow.png');
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 15px;
    text-decoration: none;
    color: #454545;
    font-weight: bold;
}
.breadcrumb span a:not(:first-child) {
    padding-left: 15px;
}

输出：

如何修改CSS以执行以下操作：

• 在.breadcrumb span a:not(:first-child)之后添加其他条件，以便后面的每个SPAN都有padding: 15px（例如提供商和个人资料），而不是之间的空跨度。
• 将最后一个非空跨度（个人资料）颜色设为#CCCCCC。

更新了CSS，为所有三个文本添加了填充：

.breadcrumb span:first-child a {
    padding-left: 0;
}
.breadcrumb span:not(:empty) {
    padding-left: 15px;
}

Answer 1

获得完整的解决方案

你需要

在第一个锚点上杀死填充

.breadcrumb span:first-child a {
    padding-left: 0;
}

为非空跨度添加填充

.breadcrumb span:not(:empty) {
    padding-left: 15px;
}

由于第一个跨度不为空，因此您需要终止第一个跨度的填充

.breadcrumb span:first-child { 
    padding-left: 0;
}

Answer 2

这是你在找什么？

.breadcrumb span:not(:empty) {
    padding:15px;
}
.breadcrumb span:last-child:not(:empty) {
    color:#ccc;
}