css - Bootstrap 在过滤时删除左边距

Question

我使用 bootstrap2.3.1 得到了这样的 View :

<div class="row-fluid">
    <div class="span3">text1</div>
    <div class="span3">text2</div>
    <div class="span3">text3</div>
    <div class="span3">text4</div>
</div>

当我过滤它以仅显示带有 text2 的 div 时，我将其他 div 显示设置为无。但是因为带有 text1 的 div 仍然是第一个子元素，所以带有 text2 的 div 有一个左边距。我该如何更改它以便它只放置 margin-left: 0;给第一个有展示 block 的 child ？

筛选后的 View 如下所示:

<div class="row-fluid">
    <div class="span3" style="display: none;">text1</div>
    <div class="span3">text2</div>
    <div class="span3" style="display: none;">text3</div>
    <div class="span3" style="display: none;">text4</div>
</div>

通过来自 bootstrap 的以下 CSS，第一个 child 的边距被移除:

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

我认为我应该做这样的事情:(但不是正确的语法)

.row-fluid [class*="span"]:first-child[display="block"] {
    margin-left: 0;
}

Answer 1

这是您的怪异选择器 ( demo ):

.row-fluid [class^="span"]:not([style="display: none;"]) {
    margin-left: 0;
}

但是，目前无法选择 first-of-class，因此此规则将应用于所有匹配的元素。我建议您在显示/隐藏元素时切换 Bootstrap 类 (.spanX)。