<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>
效果