0

我有一个引导按钮，我希望在该按钮上有一个带有数字的气泡，就像出现在 iphone 应用程序图标上的通知一样。

我对按钮的标记是：

<button class="btn btn-warning view-sl-btn" type="button"><span class="notification, red">6</span>View Shortlist</button>

跨度的CSS是：

.btn.span {
    position: absolute;

    background-color: #f56c7e;

    border: 1px solid #ce4f5e;
    padding: 2px 5px 1px;
    margin-left: -2px;
    margin-top: -16px;

    border-radius: 100px;

    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
    font-size: 11px;

    -webkit-box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
    -moz-box-shadow:    inset 0px 1px 2px rgba(255,255,255,0.4);
    -o-box-shadow:      inset 0px 1px 2px rgba(255,255,255,0.4);
    box-shadow:         inset 0px 1px 2px rgba(255,255,255,0.4);
}
.btn.span.red {
    background-color: #f56c7e;
    border-color: #ce4f5e;
}

但这似乎不起作用。

任何建议将不胜感激。

干杯

4

3 回答 3

2

问题在于您的 CSS 声明：

.btn.span

（将样式应用于具有“btn”类和“span”类的所有元素。）

<div class="btn span" />

你要这个：

.btn span

（这将设置所有span作为具有 'btn' 类的元素的后代的 s 的样式。）

于 2013-05-10T22:07:09.293 回答
1

改用以下内容

.btn span
于 2013-05-10T22:04:21.907 回答
1

是的，.btn span 是 css 的正确语法，因为 span 是一个 HTML 标记。在 span 之前使用句点表明它是一个 css 类，但事实并非如此。

于 2013-05-10T22:11:22.587 回答