html - 多个类选择器不应用属性

标签 html css responsive-design

所以我最后一个question被否决了，所以我会尝试更具体地说明这一点。

我正在尝试使用 css 创建一个类似响应式网格 的结构。我想要的是:

应该规范化 - 我将使用规范化 css
支持 Flex Box
对大多数浏览器具有向后兼容性

我制作了 4 个 imp 类:

row : using it as wrapper( width:100% ) for my columns.
col-x : x=(1-12) width 100% at small , and width 100*x/12 at medium and large.
col-m-x : x=(1-12) width 100*x/12 at medium , and is defined at medium only. 
col-l-x : x=(1-12) width 100*x/12 at large , and is defined at large only.

我已经为 m 和 l 定义了 col 这样我就可以在不同的分辨率下组合多个宽度框。例如，这里是 html:

<div class="row header">
        <div class="col-2 col-m-4 col-l-1 spoons"></div>
        <div class="col-2 col-m-1 col-l-3 spoons"></div>
        <div class="col-2 col-m-1 col-l-1 spoons"></div>
        <div class="col-2 col-m-1 col-l-2 spoons"></div>
        <div class="col-2 col-m-1 col-l-2 spoons"></div>
        <div class="col-2 col-m-4 col-l-3 spoons"></div>
    </div>

根据上面的 html 片段，行内的第一个 div 在小屏幕尺寸中为 2，在中等屏幕尺寸中为 4，在大屏幕尺寸中为 1。

问题: 

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
/* Rows and clearfix */

.row:after {
  content: " ";
  display: table;
  clear: both;
}
.row {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-align: start;
  -moz-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
/* Columns */

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  float: left;
  width: 100%;
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  padding: 2px;
}
/* Or I can do [class^='col-'] {
  float: left;
} */

/* Columns */

.hide {
  display: none;
}
.r-img {
  max-width: 100%;
  height: auto;
  display: block;
}
@media screen and (min-width: 48em) {
  /* mid devices*/
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .col-m-1,
  .col-m-2,
  .col-m-3,
  .col-m-4,
  .col-m-5,
  .col-m-6,
  .col-m-7,
  .col-m-8,
  .col-m-9,
  .col-m-10,
  .col-m-11,
  .col-m-12 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding: 0;
  }
  .col-1,
  .col-m-1 {
    width: 8.3333%;
    -webkit-flex: 1 1 8.3333%;
    -ms-flex: 1 1 8.3333%;
    flex: 1 1 8.3333%;
  }
  .col-2,
  .col-m-2 {
    width: 16.6666%;
    -webkit-flex: 1 1 16.6666%;
    -ms-flex: 1 1 16.6666%;
    flex: 1 1 16.6666%;
  }
  .col-3,
  .col-m-3 {
    width: 25%;
    -webkit-flex: 1 1 25%;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
  }
  .col-4,
  .col-m-4 {
    width: 33.3333%;
    -webkit-flex: 1 1 33.3333%;
    -ms-flex: 1 1 33.3333%;
    flex: 1 1 33.3333%;
  }
  .col-5,
  .col-m-5 {
    width: 41.6666%;
    -webkit-flex: 1 1 41.6666%;
    -ms-flex: 1 1 41.6666%;
    flex: 1 1 41.6666%;
  }
  .col-6,
  .col-m-6 {
    width: 50%;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
  }
  .col-7,
  .col-m-7 {
    width: 58.3333%;
    -webkit-flex: 1 1 58.3333%;
    -ms-flex: 1 1 58.3333%;
    flex: 1 1 58.3333%;
  }
  .col-8,
  .col-m-8 {
    width: 66.6666%;
    -webkit-flex: 1 1 66.6666%;
    -ms-flex: 1 1 66.6666%;
    flex: 1 1 66.6666%;
  }
  .col-9,
  .col-m-9 {
    width: 75%;
    -webkit-flex: 1 1 75%;
    -ms-flex: 1 1 75%;
    flex: 1 1 75%;
  }
  .col-10,
  .col-m-10 {
    width: 83.3333%;
    -webkit-flex: 1 1 83.3333%;
    -ms-flex: 1 1 83.3333%;
    flex: 1 1 83.3333%;
  }
  .col-11,
  .col-m-11 {
    width: 91.6666%;
    -webkit-flex: 1 1 91.6666%;
    -ms-flex: 1 1 91.6666%;
    flex: 1 1 91.6666%;
  }
  .col-12,
  .col-m-12 {
    width: 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
  }
  .hide-m {
    display: none;
  }
}
@media screen and (min-width: 64em) {
  /* lg devices */
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .col-l-1,
  .col-l-2,
  .col-l-3,
  .col-l-4,
  .col-l-5,
  .col-l-6,
  .col-l-7,
  .col-l-8,
  .col-l-9,
  .col-l-10,
  .col-l-11,
  .col-l-12 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding: 0;
  }
  .col-1,
  .col-l-1 {
    width: 8.3333%;
    -webkit-flex: 1 1 8.3333%;
    -ms-flex: 1 1 8.3333%;
    flex: 1 1 8.3333%;
  }
  .col-2,
  .col-l-2 {
    width: 16.6666%;
    -webkit-flex: 1 1 16.6666%;
    -ms-flex: 1 1 16.6666%;
    flex: 1 1 16.6666%;
  }
  .col-3,
  .col-l-3 {
    width: 25%;
    -webkit-flex: 1 1 25%;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
  }
  .col-4,
  .col-l-4 {
    width: 33.3333%;
    -webkit-flex: 1 1 33.3333%;
    -ms-flex: 1 1 33.3333%;
    flex: 1 1 33.3333%;
  }
  .col-5,
  .col-l-5 {
    width: 41.6666%;
    -webkit-flex: 1 1 41.6666%;
    -ms-flex: 1 1 41.6666%;
    flex: 1 1 41.6666%;
  }
  .col-6,
  .col-l-6 {
    width: 50%;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
  }
  .col-7,
  .col-l-7 {
    width: 58.3333%;
    -webkit-flex: 1 1 58.3333%;
    -ms-flex: 1 1 58.3333%;
    flex: 1 1 58.3333%;
  }
  .col-8,
  .col-l-8 {
    width: 66.6666%;
    -webkit-flex: 1 1 66.6666%;
    -ms-flex: 1 1 66.6666%;
    flex: 1 1 66.6666%;
  }
  .col-9,
  .col-l-9 {
    width: 75%;
    -webkit-flex: 1 1 75%;
    -ms-flex: 1 1 75%;
    flex: 1 1 75%;
  }
  .col-10,
  .col-l-10 {
    width: 83.3333%;
    -webkit-flex: 1 1 83.3333%;
    -ms-flex: 1 1 83.3333%;
    flex: 1 1 83.3333%;
  }
  .col-11,
  .col-l-11 {
    width: 91.6666%;
    -webkit-flex: 1 1 91.6666%;
    -ms-flex: 1 1 91.6666%;
    flex: 1 1 91.6666%;
  }
  .col-12,
  .col-l-12 {
    width: 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
  }
  .hide-l {
    display: none;
  }
}
.header {
  border: 1px solid #f52b63;
  background: #e6ae27;
}
.spoons {
  border: 1px solid #2b90f5;
  background: #3ad4b5;
  height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" />

<div class="row header">
        <div class="col-2 col-m-4 col-l-1 spoons"></div>
        <div class="col-2 col-m-1 col-l-3 spoons"></div>
        <div class="col-2 col-m-1 col-l-1 spoons"></div>
        <div class="col-2 col-m-1 col-l-2 spoons"></div>
        <div class="col-2 col-m-1 col-l-2 spoons"></div>
        <div class="col-2 col-m-4 col-l-3 spoons"></div>
</div>

上面的代码片段包含完整的代码，应该可以正常运行，但它并没有这样做。问题是，行类中的所有 div 都没有根据类设置样式以不同的分辨率指定。事实上，他们是随机挑选的，比如第一个 div 仅使用 col-2 进行样式设置，第二个很好，第三个只是一个类。我希望它们遵循正常行为，即在定义多个类时覆盖类属性。

这是说明上述情况的 firefox 的 Inspect Element 对话框的屏幕截图。

Screenshot

最佳答案

问题是您在媒体查询特定类之后定义了 col-x。

在你的例子中； “col-l-1”首先声明，然后在您定义“.col-2”的同一媒体查询 block 内，然后覆盖列的“大”版本。

最好将所有基类放在不基于宽度的媒体查询中，如下所示，然后添加中型和大型网格类，它们将在达到最小宽度时覆盖默认类:

@media only screen {
    .small-1 {
        width: 8.33333%;
    }

    .small-2 {
        width: 16.66667%;
    }

    // and so on

}

// then add you width-specific media queries

关于html - 多个类选择器不应用属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27775987/

上一篇：html - Bootstrap 面板在 IE-8 中显示为左对齐

下一篇：html - IE 和 Google Chrome 之间的页脚兼容性比较不会妥协

相关文章：

css - 在 2 div 内垂直和水平居中 svg，而不向 svg 的父 div 添加 Prop

java - 如何从 HTML 网站中提取数据？

html - 如何使用 jdbc、servlets 和 html 将文件远程上传到 MySQL 数据库

javascript - 旋转图标并同时切换内容 onclick

javascript - 类似于 JQuery 的类编程快捷方式

css - 选中时从 HTML 文本输入中移除蓝色光晕

html - 了解响应式图像和设备像素比

jquery - 用jquery创建一个div并全屏打开

css - 绝对位置给 parent 没有高度

testing - 响应式布局针对哪些设备/浏览器

©2024 IT工具网  联系我们