[分享]css3嵌套写法

CSS3是当前Web开发中重要的一部分，为了更好优化代码，提高工作效率，在写CSS3样式时我们需要熟练掌握嵌套写法。嵌套写法是指在一个元素内部嵌套另外一个元素，其实质是将样式规则的层级关系体现出来，增...

CSS3是当前Web开发中重要的一部分，为了更好优化代码，提高工作效率，在写CSS3样式时我们需要熟练掌握嵌套写法。嵌套写法是指在一个元素内部嵌套另外一个元素，其实质是将样式规则的层级关系体现出来，增加了代码的可读性和维护性。

/* 没有使用嵌套的写法 */
.header {
    width: 100%;
    height: 100px;
    background-color: gray;
}

.header .logo {
    float: left;
    width: 200px;
    height: 100px;
}

.header .nav {
    float: right;
}

.header .nav ul {
    margin: 0;
    padding: 0;
}

.header .nav li {
    float: left;
    list-style: none;
    margin-right: 20px;
    line-height: 100px;
}

.header .nav li a {
    color: white;
}

/* 使用嵌套写法 */
.header {
    width: 100%;
    height: 100px;
    background-color: gray;

    .logo {
        float: left;
        width: 200px;
        height: 100px;
    }

    .nav {
        float: right;

        ul {
            margin: 0;
            padding: 0;
        }

        li {
            float: left;
            list-style: none;
            margin-right: 20px;
            line-height: 100px;

            a {
                color: white;
            }
        }
    }
} 

通过上面两种写法的比较可以发现，嵌套写法可以使代码更加紧凑，结构更加清晰，同时将样式规则的层级关系体现出来，提高了代码的可读性和维护性。嵌套写法虽然会增加代码的缩进，但对于代码规范化的要求更高，特别是在团队协作开发中更是必不可少的一种写法。