LMLPHP后院

扫码查看  原文链接 : https://blog.lmlphp.com/archives/324/Class_write_continuously_to_raise_the_CSS_style_priority  来自 : LMLPHP后院

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

平时在写 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 来控制样式就能很方便定位了，语义也更加明确。

• 前端技术之导航栏浮动最佳实践