HTML5的css3使用div{}的了解和.div{}的全部

允我心安 提交于 2020-01-26 20:00:49

使用div标签当css来用(div{}),你会发现所有的div css设置的都一样,无论是嵌套还是两个div结果还是一样,但是我只想设置某个div,怎么办,老办法:用id或class(.div1),可以做到,但是以下代码使用这种方法很苦:

        <div class="demo-slide-tab">
            <ul>
                <li>
                    <h3>title 1</h3>
                    <div>content1</div>
                </li>
                <li>
                    <h3>title 2</h3>
                    <div>content2</div>
                </li>
                <li>
                    <h3>title 3</h3>
                    <div>content3</div>
                </li>
                <li>
                    <h3>title 4</h3>
                    <div>content4.</div>
                    44
                </li>
            </ul>
        </div>

做这个功能列表他们的div都是同一种css设置,如果通过id来设置每一个的话,会有很多代码,造成不可读性

假如我怎么实现css结果就不一样了:

        .demo-slide-tab div {
            margin: 0;
            voerflow: auto;
            padding: 10px;
            max-height: 220px;
        }

我把div css设置相同的放到一个div里面,通过类(demo-slide-tab)加空格在用div{}这种方法就可以不影响外面的div,又可以实现一起设置

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!