日期:2014-05-16  浏览次数:20792 次

CSS模块化(二) CSS的面向对象思想

2. CSS的面向对象思想

2.1封装

HTML代码                                                              

<div class=”module-a”>

    <h3>标题1</h3>

    <p>描述文字</p>

</div>

<div class=”module-b”>

    <h3>标题2</h3>

    <ul>

        <li>列表</li>

        <li>列表</li>

        <li>列表</li>

    </ul>

</div>

 

CSS代码                                                                

.module-a{.....}

.module-a h3{.....}

.module-a p{.....}

.module-b{.....}

.module-b h3{.....}

.module-b ul{.....}

.module-b ul li{.....}

.module-b ul li{.....}

.module-b ul li{.....}