CSS - 完全相同的类但不同的背景颜色，混乱

Question

这是我遇到过的最奇怪的CSS。我不能，因为我的生活，想出来。

每个<span>元素都会获得一个分配给它的类 - 填充从数据库中获取的值。 29个中的28个按计划进行 - 但是第29个只是搞砸了。添加额外的边距和填充，只是突破了角色。

现场演示：http://tf2g.com/v2/tf2g/wearable?item=demomansfro

参见'绅士商务裤的颜色'。这不是它旁边文本的长度......任何人？

Answer 1

这太棒了。只是为了澄清@Adrift的观点 thecolorofagentlemannsbusines span TS

Answer 2

是的，答案是因为您的CSS规则：

.gallery-container [class*="span"] {
    margin-left: 10px;
}

作为旁注，在css中，class用于适用于MULTIPLE元素的样式，而id用于SINGLE元素。

因此，我建议您将HTML / CSS更改为（我更喜欢第一个）：

<强>首先： HTML

<li id="thecolorofagentlemannsbusinesspants">
    <span class="paint-circle"></span>
    The Color of a Gentlemann's Business Pants
</li>

CSS

#thecolorofagentlemannsbusinesspants span {
    background-color: #whatever;
}

OR

<强>第二 HTML

<li>
    <span id="thecolorofagentlemannsbusinesspants" class="paint-circle"></span>
    The Color of a Gentlemann's Business Pants
</li>

CSS

#thecolorofagentlemannsbusinesspants {
    background-color: #whatever;
}

Answer 3

我终于明白了。我是个白痴。 Bootstrap会搜索span*类，span12 - span1。绅士商人的颜色s pan ts。

大。我认为它会搜索以span开头的类，而不是在中间找到它。