如何仅为div内第一个匹配的段落元素应用指定CSS样式

现有代码问题说明 #

你当前使用的div.example1 p.special~p.special选择器的作用是选中同一父元素内，位于p.special之后的所有同级p.special元素，会直接排除掉第一个匹配的段落。同时你当前每个div.example1内仅存在一个p.special元素，因此这个选择器无法匹配到任何元素，样式不会生效。

正确实现方案 #

方案1：兼容性最优写法（兼容所有主流浏览器） #

先给所有匹配的段落设置目标样式，再把后续同类型的段落样式重置即可，哪怕单个div.example1内有多个p.special也能正常生效：

/* 给所有符合条件的段落设置目标样式 */
div.example1 p.special {
  color: green;
  font-weight: bold;
}
/* 重置同一div内排在后面的.special段落样式 */
div.example1 p.special~p.special {
  color: initial;
  font-weight: normal;
}

方案2：简洁写法（适配你当前的HTML结构） #

你当前的每个div.example1内第一个元素就是p.special，直接使用:first-child选择器即可：

div.example1 p.special:first-child {
  color: green;
  font-weight: bold;
}

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