选择任何三角形和正方形
这个任务需要选择多个嵌套元素，也称为组选择器。
不使用嵌套，现在的CSS有两种方式：
.demo .triangle, .demo .square { opacity: .25; filter: blur(25px); }
或者，使用:is()
/* grouped with :is() */ .demo :is(.triangle, .square) { opacity: .25; filter: blur(25px); }
使用嵌套，有两种有效的方式：
.demo { & .triangle, & .square { opacity: .25; filter: blur(25px); } }
或者
.demo { .triangle, .square { opacity: .25; filter: blur(25px); } }
这两种嵌
套选项在内部都使用了:is()。
.demo :is(.triangle, .square) { opacity: .25; filter: blur(25px); }
结果，.demo内部只剩下.circle元素：
<div class="demo"> <div class="sm triangle pink"></div> <div class="sm triangle blue"></div> <div class="square blue"></div> <div class="sm square pink"></div> <div class="sm square blue"></div> <div class="circle pink"></div> <div class="sm circle blue"></div> <div class="lg circle purple"></div> <div class="triangle blue"></div> <div class="sm circle pink"></div> <div class="square purple"></div> <div class="sm triangle purple"></div> <div class="sm square pink"></div> <div class="sm square purple"></div> <div class="sm circle blue"></div> <div class="sm circle pink"></div> <div class="lg triangle pink"></div> <div class="sm square pink"></div> <div class="sm square purple"></div> <div class="sm circle blue"></div> <div class="square pink"></div> <div class="sm square pink"></div> <div class="sm square purple"></div> <div class="sm circle blue"></div> </div>
选择大三角形和大圆形
这个任务需要使用复合选择器，元素必须同时具有两个类才能被选中。
不使用嵌套，现在的CSS写法：
.demo .lg.triangle, .demo .lg.square { opacity: .25; filter: blur(25px); }
或者
.demo .lg:is(.triangle, .circle) { opacity: .25; filter: blur(25px); }
使用嵌套，有两种有效的方式：
.demo { .lg.triangle, .lg.circle { opacity: .25; filter: blur(25px); } }
或者
.demo { .lg { &.triangle, &.circle { opacity: .25; filter: blur(25px); } } }
结果，所有大三角形和大圆形在.demo内部被隐藏：
使用复合选择器和嵌套的专业提示
&符号在这里非常有用，因为它明确显示了如何连接嵌套选择器。考虑以下示例：
.demo { .lg { .triange, .circle { opacity: .25; filter: blur(25px); } } }
虽然这是一种有效的嵌套方式，但结果可能不符合您的预期。原因是，如果没有&来指定期望的.lg.triangle, .lg.circle组合，实际结果将是.lg .triangle, .lg .circle；后代选择器。
在没有&的情况下嵌套类始终会生成后代选择器。使用&符号可以更改结果。
选择除了粉色形状之外的所有形状
这个任务需要使用否定功能伪类，元素不能具有指定的选择器。
不使用嵌套，现在的CSS写法：
.demo :not(.pink) { opacity: .25; filter: blur(25px);}
使用嵌套，有两种有效的方式：
.demo :not(.pink) { opacity: .25; filter: blur(25px); }
或者
.demo { :not(.pink) { opacity: .25; filter: blur(25px); } }
结果，所有不是粉色的形状在.demo内部被隐藏：
div class="demo"> <div class="sm triangle pink"></div> <div class="sm triangle blue"></div> <div class="square blue"></div> <div class="sm square pink"></div> <div class="sm square blue"></div> <div class="circle pink"></div> <div class="sm circle blue"></div> <div class="lg circle purple"></div> <div class="triangle blue"></div> <div class="sm circle pink"></div> <div class="square purple"></div> <div class="sm triangle purple"></div> <div class="sm square pink"></div> <div class="sm square purple"></div> <div class="sm circle blue"></div> <div class="sm circle pink"></div> <div class="lg triangle pink"></div> <div class="sm square pink"></div> <div class="sm square purple"></div> <div class="sm circle blue"></div> <div class="square pink"></div> <div class="sm square pink"></div> <div class="sm square purple"></div> <div class="sm circle blue"></div> </div>
