如何选择带有一些文字的元素？

Question

我使用<div>标记在我的网页中插入图标​​：

<div class="icon warning"></div>There is a warning in the page

问题是图标太靠近文字了：

以下是图标的代码：

div.icon{
    display:inline-block;
    width:16px;
    height:16px;
    background-color:transparent;
    background-image:url(/images/icons.png);
    background-repeat:no-repeat;
    vertical-align:text-top;
    background-position:0 0;
}

div.icon.warning{
    background-position:-48px 0;
    cursor:help;
}

我想在图标和文字之间放置几个像素距离，只有当图标后面跟着某些文字时。换句话说，如果图标后面没有文字，我不想要那个空格。换句话说，对于下面的代码，我想在div＃icon1和文本“页面中有一个警告”之间有5px的距离，但我不希望div＃icon2和它之后的元素之间有任何距离：< / p>

<li><div id="icon1" class="icon warning"></div>There is a warning in the page</li>

<li><div id="icon2" class="icon warning"></div></li>

请注意，不的图标始终显示在<li>个元素中，因此您建议的选择器不能依赖图标可能出现的上下文。图标唯一确定的是，如果它们后面跟着一些文字，它们和文本之间必定有一些空格。

Answer 1

您可以在span中包装文本并对其应用填充：

<div class="icon warning"></div><span class="warning-text">There is a warning in the page</span>

.warning-text {
  padding-left: 5px;
}

<强>更新 根据以下评论，我决定更改使用span而不是div。 可以使用div，但使用额外的display: inline; CSS属性。

Answer 2

如果您愿意稍微重新构建您的标记（不添加任何额外的大小）：

http://jsfiddle.net/8kcQv/

关键是：

.icon:empty{ padding-left: 20px; }

这适用于IE 9，Chrome等。其他浏览器会在空元素之间添加额外空间。这是一个替代版本，当不支持:empty时，它会以不同的方式降级（图标和文本之间的空间更小）：

http://jsfiddle.net/8kcQv/1/

HTML

<div class="icon">This message has text.</div>
<br>
<br>
<div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>

CSS

.icon{
 padding: 4px 4px 4px 32px; /* 32px adds extra space to pad against text */
 height: 24px;
 line-height: 16px;
 font-family: sans-serif;
 font-size: 16px;
 background:url(http://icons.iconarchive.com/icons/pixelmixer/basic/16/warning-icon.png) no-repeat 4px 4px;
 display: inline-block;
}

/* empty matches elements with no children (including text nodes) */
.icon:empty{ padding-left: 20px; } 

或者，如果您使用以下样式，则可以完全不使用:empty：

.icon{
    padding: 4px 8px 4px 24px;
    ...
}

这会在图标的两侧放置相等的距离。

Answer 3

我建议使用addClass jQuery。添加一个类，如果后面有文本，将添加一个空格，否则不要放任何类。您应该设置默认项目，根本没有空格。