Question

在CSS文件中，我有以下规则：

div.breadcrumbs span {
    position: relative;
    left: -120px;
    height: 16px;
    line-height: 16px;
    margin: 0 20px;
    overflow: hidden;
}

div.breadcrumbs img {
    margin: 0 -20px;
    padding: 5px 5px 0px 5px;
}

div.breadcrumbs a {
    color: #88263F;
    font-weight:bold;
}

img和a的规则有效，但不适用于span。

还有些东西不像

那样

span {
    display: none;
}

目前我不知道如何调试它。

Answer 1

原则上，您发布的CSS有效。

如果您的HTML看起来像这样......

<div class="breadcrumbs">
    These are <span>breadcrumbs</span> in a line...
</div>

这是你的CSS：

div.breadcrumbs span {
    position: relative;
    left: -120px;
    height: 16px;
    line-height: 16px;
    margin: 0 20px;
    overflow: hidden;
}
span {
    display: none;
}

然后span元素未按预期显示。

请参阅演示：http://jsfiddle.net/audetwebdesign/qyu5A/

您可能还有其他问题，例如其他CSS规则存在冲突，导致display: none属性无法正常工作。

内联元素的定位没有任何问题，但根据行高和周围内容，您可能无法获得预期的结果。

您可能想要了解有关CSS级联和特异性如何工作的更多信息。

参考：http://www.w3.org/TR/CSS2/cascade.html#cascade

注意：内联元素会忽略height属性。

Answer 2

感谢您的提示，特别是小提琴！

使用它我在CSS文件中也找到了以下代码片段：

body.home div.breadcrumbs span { position:relative; left:0; }

放置＆＃34; div.breadcrumbs span＆＃34;在此之后删除＆＃34; position：relative;＆＃34;它起到了预期的作用。

无法将CSS属性添加到<span> </span>

2 个答案: