如何仅对class为richC的第一个span应用CSS，不作用于嵌套span？

问题原因 #

你使用的.richC span属于后代选择器，会匹配.richC元素内部所有层级的span标签，因此样式会作用到嵌套的内部span上，不符合预期。

解决方案 #

方案1：直接匹配目标元素 #

你需要为带richC类的最外层span本身设置样式，直接使用类选择器即可，该写法只会命中class="richC"的元素，不会影响内部嵌套的任何标签：

.richC {
   background-color: #d6edfd;
   border-radius: 10px;
   display: block;
   margin: 10px;
   color: #1776bb;
   font-weight: normal;
   padding: 2px 10px;
   border: 2px solid #1776bb;
}

方案2：重置可继承属性 #

如果发现内部span继承了color这类可继承的样式属性，额外添加重置规则即可：

.richC span {
  color: initial;
  background-color: transparent;
  border: none;
  /* 其他需要重置的属性可自行补充 */
}

补充：仅匹配直接子span #

如果你实际需求是选中.richC的第一级子span，不匹配更深层级的嵌套span，可以使用直接子选择器>：

.richC > span {
  /* 此处写对应样式 */
}

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