1.交集选择器
只能交两个，第一个是选择器，第二个是class/id
两者之间无空格，无，
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>* {margin: 0;padding: 0;}/* 1.类名+class的交集选择器 */div.red {color: red;}/* 2.类名+id的交集选择器 */div#blue {color: blue;}</style><body><div class="red">111</div><div id="red">222</div><p class="red">333</p><div id="blue">444</div></body></html>
结果为
该例子中
1.div.red只控制既是div选择器，又是class为red的文字颜色变为red(color:red；)
所以<div class="red">111</div>满足，111文字变红了
<div id="red">222</div>是div选择器，是id为red,不是class为red,所以不满足
<p class="red">333</p>是class为red,不是div选择器，是选择器p,所以不满足
2.div#blue只控制既是div选择器，又是id为blue的变化
所以<div id="blue">444</div>满足，444文字变蓝了
2.并集选择器
可以并集多个，各个之间用，隔开
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>* {margin: 0;padding: 0;}/* 1.类名+class的交集选择器 */div.red {color: red;}/* 2.类名+id的交集选择器 */div#blue {color: blue;}/* 1.并集选择器 */.orange .red,.yellow,#blue,li {color: orange;}</style><body><!-- 交集选择器 --><div class="red">111</div><div id="red">222</div><p class="red">333</p><div id="blue">444</div><!--并集选择器 --><div class="orange"><div class="red">111</div><div class="yellow">222</div><p class="red">333</p><i id="blue">444</i></div><li>555</li></body></html>
结果为
该例子中
.orange .red,.yellow,#blue,li
.orange和之后的id/class（比如.red,.yellow,#blue等）之间有空格(因为.red,.yellow,#blue属于.orange的子级)
总体是.orange .red（不为交集选择器，只是父子级关系）和.yellow和#blue和li为并集选择器，之间有,隔开
控制.orange选择器里面class为red和class为yellow和id为blue和选择器li的文字颜色变为orange(color:orange;)
3.交集选择器中可以有并集选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>* {margin: 0;padding: 0;}/* 1.类名+class的交集选择器 */div.red {color: red;}/* 2.类名+id的交集选择器 */div#blue {color: blue;}/* 1.并集选择器 */.orange .red,.yellow,#blue,li {color: orange;}/* 2.并集选择器中有交集选择器 */div.pink,h2,.green .s1,.green #s3 {color: pink;}</style><body><!-- 交集选择器 --><div class="red">111</div><div id="red">222</div><p class="red">333</p><div id="blue">444</div><!--并集选择器 --><div class="orange"><div class="red">111</div><div class="yellow">222</div><p class="red">333</p><i id="blue">444</i></div><li>555</li><!-- 并集选择器中有交集选择器 --><div class="pink"><p>111</p><em>222</em></div><div class="pink">333</div><h2>444</h2><div class="green"><div class="s1">a</div><div class="s2">b</div><div id="s3">c</div></div></body></html>
结果为
该例子中
div.pink,h2，.green .s1,.green .s3
div.pink之间无空格，因为这个是交集选择器，选中的是所有既是div选择器，又是class为pink的
.green和之后的class为s1之间有空格(因为.s1属于.green的子级)
.green和之后的id为s3之间有空格(因为.s3属于.green的子级)
总体是div.pink（自身为交集选择器）和h2和.green .s1和.green .s3为并集选择器，之间有,隔开
控制所有既是div选择器又class为pink和h2和div选择器里面class为green的class为s1和idiv选择器里面d为s3的文字颜色变为pink(color:pink;)
