我每个里面都有混杂的内容

框,我需要的是 Select 所有的图像,除了它找到的第一个.我用不同的方法试过了,但我不能得到它,你能帮我吗?下面是我留下的代码

<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>

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

推荐答案

只有当用户设置了标志时,Firefox才支持css:has Select 器.

其他主要浏览器在默认情况下都支持它,因此这将起作用:

*: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>

也就是说, Select 位于包含img元素的元素之前的某个元素(是其同级元素)中的每个img.

Css相关问答推荐

使用location:stickly将元素固定到其父容器的顶部

为什么我不能编辑垫按钮填充?

如何在移动屏幕尺寸上包装元素?

Safari CSS扫描动画效果不起作用

在ReactJS中使用动画在栅格上添加柱

为什么CSS flex似乎应用了两次内部元素的填充?

Z Index 复杂性 - 如何将组件放置在 div 内部以相对于其级别外部的组件具有更高的 z-index 值?

如何按列垂直对齐项目,但不在列内水平对齐

为什么左浮动上的清除:左也会影响右浮动,以及如何避免它

和号 (&) 作为 SASS @mixin 中的变量

我无法覆盖 react ui 库中的组件样式

Blazor 组件未链接 css

CSS:如何在嵌套计数器中有多个计数器

整个列的 CSS Grid Margin Top

n 个元素的 CSS 关键帧动画

CSS动画恢复默认

CSS3 的 :root 伪类和 html 有什么区别?

表格溢出时水平滚动

如何对齐标签和文本区域?

仅当将 Div 悬停在上方时才显示滚动条?