LMLPHP后院

class 连写提升 CSS 样式优先级技术

maybe yes 发表于 2017-07-12 20:34

本文介绍一些前端技巧,前端高手可以绕道。

平时在写 CSS 的时候,经常的会用到 @media screen 功能,用来兼容不同设备。在实际测试中发现,@media screen 样式必须放在被覆盖的样式后面,否则这个样式是不会生效的。

当今很流行的网页布局,左边菜单区,位置固定,主体内容区域除去菜单区域宽度后居中展示;如果屏幕比较小,对主体内容样式做一些修改,比如与左边菜单区的距离等。如下代码示例:

.sidebar {
    position: fixed;
    z-index: 10;
    top: 100px;
    left: 0;
    bottom: 0;
    padding: 40px 0 30px 30px;
    width: 260px;
    margin-right: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

.content {
    position: relative;
    padding: 2.2em;
    margin: 0 auto;
    margin-left: 300px;
}

@media screen and (max-width: 1500px){
    .content {
        margin-left: 280px;
    }
}

HTML 代码示例:

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

从上面的代码可以看出,.content 样式在 screen 里面必须放在下面才能生效。如果在实际环境中,代码的顺序不好控制,可以通过下面的方式来解决。

<div class="content with-sidebar"></div>

@media screen and (max-width: 1500px){
    .content.with-sidebar {
        margin-left: 280px;
    }
}

在文档里多加一个样式 with-sidebar,通过 .content.with-sidebar 连写来控制 @media 中样式的优先级。既然是多加一个样式名称,为什么还要在 CSS 写法上加上 .content 前缀呢?这个可不是多此一举,如果仅仅是为了样式那是可以的,而很多时候有 js 脚本控制的时候,这样通过改变 class 来控制样式就能很方便定位了,语义也更加明确。

相关文章
LMLPHP,可爱滴WEB开发框架

2017-11-19 05:38:09 1511041089 0.005760