Css 利润被忽略了。特殊性问题 我使用了基础4框架,并且遇到了一个问题,其中边框被边框的边框所覆盖,这意味着我不能将边距应用到某些元素而不必使用!重要的关键词
下面是my_grid.scss文件,它为移动浏览器应用布局网格Css 利润被忽略了。特殊性问题 我使用了基础4框架,并且遇到了一个问题,其中边框被边框的边框所覆盖,这意味着我不能将边距应用到某些元素而不必使用!重要的关键词,css,sass,zurb-foundation,Css,Sass,Zurb Foundation,下面是my_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); } %colu
%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;
}
}
}
只有在我申请的情况下才有效!对它很重要。查看Web开发工具,我可以看到这个问题,但不知道如何解决它:
我认为问题可能是因为我在SASS中为网格定义占位符以避免代码膨胀。通常您会使用mixin,代码将直接包含在CSS中的元素中,这将覆盖该元素的边距。扩展与mixin在这里不会有什么区别。您的选择器的特殊性太大,无法被这样一个简单的选择器覆盖:
#blog entries.entry
是.entry
的一个更具体的实例
您有几个选择:
- 不要嵌套选择器(首先避免使用像
#blog entries.entry这样的强选择器)
- 使你的第二个选择器比第一个选择器具有同样多的特异性(或更多)
- 使用
!重要信息