编写CSS选择器：指定.css1元素及#div101子元素显示红色

现有HTML结构 #

<div id="div1" class="css1">
    <span>Student A </span>
</div>
<div id="div2" class="css1">
    <span>Student B </span>
</div>
<div id="div3" class="css1">
     <div id="parentDiv">
         <div id="div101">
               <span> Student C </span>
         </div>

         <div id="div201">
               <span> Student D </span>
         </div>
     </div>
</div>

当前已存在的CSS #

.css1{
     color: red;         
 }

需求说明 #

需要调整CSS选择器，实现以下效果：

• 带有.css1类的#div1、#div2元素显示红色；
• 带有.css1类的#div3元素本身不显示红色，仅其子元素#div101显示红色。

解决方案代码 #

原有的.css1规则会让#div3也呈现红色，因此需要先重置#div3的颜色，再指定目标元素的样式：

/* 保留div1、div2的红色，排除div3 */
.css1:not(#div3) {
  color: red;
}

/* 重置div3的颜色，覆盖原.css1规则 */
#div3.css1 {
  color: initial;
}

/* 让div3下的div101显示红色 */
#div3.css1 #div101 {
  color: red;
}

也可以合并为更简洁的写法：

.css1:not(#div3), #div3.css1 #div101 {
  color: red;
}

#div3.css1 {
  color: initial;
}

效果说明 #

• #div1、#div2及其内部的span会显示红色；
• #div3本身颜色恢复默认，仅#div101及其内部的span显示红色，#div201保持默认颜色。

内容的提问来源于stack exchange，提问作者sunil