一些比较巧妙的css用法

版权声明： https://blog.csdn.net/weixin_41826907/article/details/79910443

nth-of-type(1)和‘+’选择器排除第一个元素的样式

比如一个很常见的需求：对以下li（除第一个外）加样式margin-left：10px

<ul class="ul">
   <li class="ul__li"></li>
   <li class="ul__li"></li>
   <li class="ul__li"></li>
   <li class="ul__li"></li>
</ul>

css3的nth-of-type是这样做：

.ul__li {
    margin-left: 10px;
    &:nth-of-type(1) {
        margin-left: 0;
    }
}

通过css2的’+’选择器可以这样做:

.ul__li+.ul__li {
    margin-left: 10px
}

多列等高

<style type="text/css">
    .web_width{
        width: 100%;
        overflow: hidden;           //关键所在
    }
    .left{
        float: left;
        width: 20%;
        min-height: 10em;
        background: #66afe9;
        padding-bottom: 2000px;     //关键所在
        margin-bottom: -2000px;     //关键所在
    }
    .right{
        float: right;
        width: 80%;
        height: 20em;
        background: #f00;
    }
</style>