一、概念
两个或者两个以上的基础选择器通过不同的方式连接在一起
二、交集选择器
标签+类（ID）选择器{属性：值；}
特点：即要满足使用了某个标签，还要满足使用了类（id）选择器。
<style type="text/css"> .box { font-size: 30px; } div.box { color: blue; } #miss { color: blueviolet; } div#miss { width: 400px; height: 300px; background-color: yellow; } </style> </head> <body> <div class="box">即要满足使用了某个标签，</div> <p class="box">还要满足使用了类（id）选择器。</p> <div id="miss">两个或者两个以上的基础选择器通过不同的方式连接在一起。</div> </body>
三、后代选择器
选择器+空格+选择器{属性：值;}
后代选择器首选要满足包含（嵌套）关系。
父集元素在前边，子集元素在后边。
特点：无限制隔代。只要能代表标签，标签、类选择器、ID选择器自由组合。
<style type="text/css"> .box { font-size: 20px; color: red; } div p span { font-size: 50px; } </style> </head> <body> <div> <p><span>后代选择器首选要满足包含（嵌套）关系。</span></p> </div> <div>无限制隔代。 只要能代表标签，标签、类选择器、ID选择器自由组合。</div> </body>
四、子代选择器
选择器>选择器{属性:值;}
选中直接下一代元素。
<style type="text/css"> div>span{ color: red; font-size: 40px; } </style> </head> <body> <div> <p><span>xxxxxxxxxxxx</span></p> <span>选中直接下一代元素。</span> </div>
五、并集选择器
选择器+，+选择器+，选择器{属性:值;}
<style type="text/css"> div,p,span,h1{ color: white; font-size: 40px; background-color: green; } </style> </head> <body> <div>选择器凄凄切切群群</div> <p>惺惺惜惺惺想寻寻寻寻寻寻寻寻寻寻</p> <span>钱钱钱钱钱钱钱钱钱</span> <h1>nnnnnnnnnnnnnnnnn</h1> </body>