CSS实现：排除页面首个img元素，选中其余所有img

页面中每个<p>标签包含混合内容，需要选中整个页面里除第一个img之外的所有img元素，尝试多种CSS选择器均未成功，以下是尝试的代码：

<style>
  img{ width:50px; height:50px; }
  
  /* 尝试的选择器均已注释 */
  /*p:not(p:first-of-type) > img{
    border:2px solid red 
  }*/
   
  /*p > :not(:first-of-type > img) {
    border:2px solid red 
  }*/
  /*p:not(p > img:nth-of-type(1)){
    border:1px solid red 
  }*/
  /*img:not(:nth-of-type(1)) {
    border:1px solid red;
  }*/
  /* *:not(img:first-of-type){
    border: 1px solid red;
  }*/
  /* *:not(img:first-of-type) > img {
    border: 1px solid red;
  }*/
  /* :not(*:first-of-type) img{
    border: 1px solid red;
  }*/ 
  *:not(:first-of-type > img) > img {
    border: 1px solid red;
  }
</style>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p>hello</p>
<p>hello</p>

<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>

问题分析 #

之前的选择器失效的核心原因：CSS的:first-of-type、:nth-of-type都是基于父元素的选择逻辑，每个img都在独立的<p>标签里，所以每个img都是各自父元素的第一个子元素，直接用img:not(:first-of-type)会选中所有img（因为每个img都是自身父级的:first-of-type），自然达不到预期效果。

解决方案 #

方法1：利用:has()选择器（现代浏览器支持） #

先给所有img添加样式，再排除第一个包含img的<p>里的img：

img {
  width:50px; 
  height:50px;
  border: 2px solid red;
}

/* 选中页面中第一个包含img的p，移除其中img的边框 */
p:has(img):first-of-type img {
  border: none;
}

方法2：通用兄弟选择器（兼容性更好） #

选中第一个包含img的<p>之后，所有包含img的<p>里的img：

img {
  width:50px; 
  height:50px;
}

/* 第一个含img的p之后，所有含img的p里的img添加边框 */
p:has(img) ~ p:has(img) img {
  border: 2px solid red;
}

方法3：全局选择结合优先级（无兼容性问题） #

如果需要兼容不支持:has()的旧浏览器，可以用以下方式：

img {
  width:50px; 
  height:50px;
  border: 2px solid red;
}

/* 通过父级选择器优先级，仅移除第一个img的边框 */
body > p:nth-of-type(5) img {
  border: none;
}

注：这种方法依赖第一个img所在的<p>在页面中的具体位置（示例中是第5个p），如果页面结构变动需要调整选择器。

内容的提问来源于stack exchange，提问作者LΞИIИ