css相同的div怎么写才能减少代码?

html-css08

css相同的div怎么写才能减少代码?,第1张

一般有两种方法。。

一,不同的标签,相同的样式,可以将各条合并成一句。如:body,body a,body a:link,body a:href {color:#}

但是这样并不推荐,因为这样容易出现浏览器显示错误。尤其是旧版本非IE浏览器。

第二种,相同的标签,相同的样式,用一句就可以了。。

如原来为:body div {}#my_profile div {}#my_link div{}

可以改为:body div {}

或者直接用: div {}

说明,因为样式是有继承性的,body为最上层样式,其它下层样式默认会继承上层样式,因此,如果下层样式与上层一致则可不再单独定义。。只需在有特别需要的地方单独另写样式代码。。。利用好样式的继承功能将能让你事半功倍,而且页面更整洁和谐。。。

<script type="text/javascript" src="js/jq.js"></script><!--这里要引入jQuery库-->

<script type="text/javascript">

$(function(){

    $(".icon").click(function(){

        if($(this).html()=="+"){

        $(this).html("-")

        }

        else{

            $(this).html("+")

        }

        $(".content p").toggle(100)

    })

})

</script>

<style type="text/css">

*{margin:0padding:0font:12px/16px 宋体}

.divcon{width:300pxdisplay:inline-tablepadding:10pxborder:1px solid #CCC}

.divcon div{float:left}

.icon{width:20pxheight:20pxborder:1px solid #666text-align:centerline-height:20pxcursor:pointer}

.content{width:270pxpadding-left:5px}

.content p{color:#999display:none}

</style>

<div class="divcon">

    <div class="icon">+</div>

    <div class="content">

        这里是文字哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦……

        <p>隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字</p>

    </div>

</div>