忽略边距。特异性问题答案

【问题标题】：Margins Being Ignored. Specificity Issue忽略边距。特异性问题
【发布时间】：2013-05-19 23:14:28
【问题描述】：

我正在使用 Foundation 4 框架，并且遇到了边距被框架边距覆盖的问题，这意味着我无法在不使用 !important 关键字的情况下将边距应用于某些元素。

下面是我的 _grid.scss 文件，它为移动浏览器应用布局网格。

%row {
    @include grid-row;
}

%columns-1 {
    @include grid-column(1);
}

%columns-2 {
    @include grid-column(2);
}

%columns-3 {
    @include grid-column(3);
}

%columns-4 {
    @include grid-column(4);
}

%columns-5 {
    @include grid-column(5);
}

%columns-6 {
    @include grid-column(6);
}

%columns-7 {
    @include grid-column(7);
}

%columns-8 {
    @include grid-column(8);
}

%columns-9 {
    @include grid-column(9);
}

%columns-10 {
    @include grid-column(10);
}

%columns-11 {
    @include grid-column(11);
}

%columns-12 {
    @include grid-column(12);
}

header {
    @extend %row;

    #branding {
        @extend %columns-6;
    }

    #main-navigation {
        @extend %columns-6;
        position: absolute;
        top: 0;
        left: 0;
    }

    #mobile-navigation-toggle {

    }
}

#games-list {
    @extend %row;
}

#blog-entries {
    @extend %row;

    .entry {
        @extend %row;

        img {
            @extend %columns-4;
        }

        .entry-blurb {
            @extend %columns-8;
        }
    }
}

footer {

    #footer-links {
        @extend %row;

        .link-block {
            @extend %columns-6;
        }
    }
}

这是 base.scss 文件中受影响的行：

.entry {
margin-bottom: 10px;

.entry-blurb {
    .entry-description {
    display: none;
        }
}
}

只有当我应用 !important 时它才会起作用。查看 Web Dev Tools 我可以看到问题，但不知道如何解决它：

我认为问题可能是因为我在 SASS 中为网格定义占位符以避免代码膨胀。通常你会使用 mixin，代码会直接包含在 CSS 中的元素中，然后会覆盖该元素的边距。

【问题讨论】：

标签： css sass zurb-foundation

【解决方案1】：

Extend 与 mixin 在这里并没有什么不同。您的选择器具有太多特殊性，无法被这样一个简单的选择器覆盖：#blog-entries .entry 是 .entry 的更具体实例。

你有几个选择：

不要嵌套选择器（首先要避免使用像 #blog-entries .entry 这样强大的选择器）
让您的第二个选择器具有与第一个选择器一样多（或更多）的特异性
使用!important

【讨论】：