CSS先后顺序影响效果

<head>
        <style type="text/css">
            <!--h1 em{color:red}-->
            <!--后代选择器-->
            ul em{color:red;font-weight:bold;}
            <!--子元素选择器-->
            h1 > strong {color:red}
            <!--相邻兄弟选择器-->
            h2 + p {margin-top:50px;}   
            <!--相邻兄弟选择器1-->
            li + li {font-weight:bold;}
        </style>
  </head>

显示效果

 

然后换下顺序

 

<head>
        <style type="text/css">
            <!--h1 em{color:red}-->
            li + li {font-weight:bold;}
            <!--后代选择器-->
            ul em{color:red;font-weight:bold;}
            <!--子元素选择器-->
            h1 > strong {color:red}
            <!--相邻兄弟选择器-->
            h2 + p {margin-top:50px;}
            <!--相邻兄弟选择器1-->
        </style>
    </head>

效果

 

 

posted @ 2015-05-20 20:34  小屁孩988  阅读(240)  评论(0编辑  收藏  举报