CSS 选择器

<span style="font-family: SimSun;">后代选择器 与 子代选择器</span>

<span style="font-family: SimSun;">①写法不一样：后代选择器的标识为：空格         如：<a target=_blank target="_blank" href="https://www.baidu.com/s?wd=ul&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPhfsuWbdnvDkPyDLnH0v0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHckPHD3P1mL" class="baidu-highlight" rel="nofollow" style="text-decoration: none; color: rgb(12, 137, 207);">ul</a> li{width:150px;} 【<a target=_blank target="_blank" href="https://www.baidu.com/s?wd=ul&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPhfsuWbdnvDkPyDLnH0v0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHckPHD3P1mL" class="baidu-highlight" rel="nofollow" style="text-decoration: none; color: rgb(12, 137, 207);">ul</a>和li之间用空格隔开】子选择器的标识为：>    如：<a target=_blank target="_blank" href="https://www.baidu.com/s?wd=ul&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPhfsuWbdnvDkPyDLnH0v0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHckPHD3P1mL" class="baidu-highlight" rel="nofollow" style="text-decoration: none; color: rgb(12, 137, 207);">ul</a>>li{width:150px;}【ul和li之间用>隔开】②功能不一样：后代选择器是选择ul包围的 所以元素中的所有li元素，包括子元素、孙元素、曾孙元素等等等。子选择器仅仅选择ul包围的 子元素中的 li元素，不包括孙元素、曾孙元素等等等。③<a target=_blank target="_blank" href="https://www.baidu.com/s?wd=%E5%85%BC%E5%AE%B9%E6%80%A7&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPhfsuWbdnvDkPyDLnH0v0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHckPHD3P1mL" class="baidu-highlight" rel="nofollow" style="text-decoration: none; color: rgb(12, 137, 207);">兼容性</a>不一样：后代选择器是所有<a target=_blank target="_blank" href="https://www.baidu.com/s?wd=%E6%B5%8F%E8%A7%88%E5%99%A8&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPhfsuWbdnvDkPyDLnH0v0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHckPHD3P1mL" class="baidu-highlight" rel="nofollow" style="text-decoration: none; color: rgb(12, 137, 207);">浏览器</a>都兼容的，都可使用。子选择器在IE6、<a target=_blank target="_blank" href="https://www.baidu.com/s?wd=IE7&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPhfsuWbdnvDkPyDLnH0v0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHckPHD3P1mL" class="baidu-highlight" rel="nofollow" style="text-decoration: none; color: rgb(12, 137, 207);">IE7</a>、IE8中则是不被支持的选择器，各自bug！</span>

<span style="font-family: SimSun;">并集选择器</span>

<span style="font-family: SimSun;">选择器1，选择器2{属性名:属性值}</span>

<span style="background-color: rgb(255, 247, 219);"><span style="font-family: SimSun;">并集选择器是多个选择器通过逗号连接而成的．在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以利用并集选择器同时声明风格相同的CSS选择器。</span></span><span style="font-family: arial, 'courier new', courier, 宋体, monospace, 'Microsoft YaHei';"></span>

<span style="font-family: SimSun;"><span style="background-color: rgb(255, 247, 219);">交集选择器：</span></span>

<span style="background-color: rgb(255, 247, 219);"><span style="font-family: SimSun;"></span></span><p style="margin: 10px auto; padding-top: 0px; padding-bottom: 0px; font-family: 微软雅黑, Verdana, Arial, Helvetica, sans-serif; font-size: 15px; line-height: 27px;">交集”复合选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。</p><p style="margin: 10px auto; padding-top: 0px; padding-bottom: 0px; font-family: 微软雅黑, Verdana, Arial, Helvetica, sans-serif; font-size: 15px; line-height: 27px;">注意其中第一个必须是标记选择器，如p.class1，但有时候会看到.class1.class2，即2个都是类选择器，在其他浏览器中是允许出现这种情况的，但IE6不兼容。代码片段：</p><p style="margin: 10px auto; padding-top: 0px; padding-bottom: 0px; font-family: 微软雅黑, Verdana, Arial, Helvetica, sans-serif; font-size: 15px; line-height: 27px;"></p><pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0px 2px 10px; padding: 5px 5px 5px 25px; border: 1px solid rgb(70, 142, 208); font-family: 宋体; background-color: rgb(238, 245, 255);">h1.center {color:red; text-align:center;}