如何使用CSS为第一个.goal类设置特殊样式，其余元素设置其他样式

原有代码不生效的原因 #

• 标签类型匹配错误：HTML中.special、.goal对应的元素是div，你写的CSS选择器里用了p.special、p.goal，标签不匹配导致无法命中元素
• 选择器逻辑错误：所有.goal元素都是各自父级.special的唯一子元素，兄弟选择器~无法跨父级匹配其他.goal元素

正确实现代码 #

你可以通过选中第一个.special父元素，再匹配其子元素.goal实现需求：

/* 给所有.goal设置通用样式（即其余同类元素的样式） */
div.example2 .special .goal {
  color: #333;
}
/* 单独匹配第一个.special下的.goal元素，设置特殊样式 */
div.example2 .special:first-child .goal {
  color: green;
}

可选兼容方案 #

如果你的页面需要兼容IE8及更低版本浏览器，可以直接给第一个.special元素额外添加自定义类，比如special-first，再编写对应样式：

<!-- 修改HTML结构 -->
<div class="example2">
  <div class="special special-first">
    <div class="goal">
        This is paragraph 1
    </div>
  </div>
  <!-- 其余结构不变 -->
</div>

div.example2 .special.special-first .goal {
  color: green;
}

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