CSS 不要选择包含混合内容的 div 中的第一个元素

Question

我在每个

框中混合了内容，我需要的是选择除找到的第一个图像之外的所有图像。我尝试了不同的方法，但我无法得到它，你能帮我吗？下面我留下代码

<style>
  img{ width:50px; height:50px; }
  
  /* apply border to all but first image  */
  /*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>

DEMO: https://jsbin.com/vawumehime/1/edit?html,output

Answer 1

您可以使用

:nth-child()

选择器选择除前两个

<p>

标签以外的所有标签：

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

p:nth-child(n+3) > img {
  border:2px solid red 
}

<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>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>

Answer 2

Firefox 支持 CSS :has selector only if the user has set a flag.

其他主要浏览器默认支持它，所以这会起作用：

*:has(> img) ~ * img

<style>
  img {
    width: 50px;
    height: 50px;
  }
  
  *:has(> img)~* img {
    border: solid 1px 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>

也就是说，选择一个元素中的每个 img，该元素位于包含 img 元素的元素之前（是其兄弟元素）。