Html 如何仅 Select 与子代CSS类匹配的第一个元素

发布于02月10日

我需要将outer类的后代类(我们称其为inner)作为目标，但only是具有inner类的第一个元素(这不是外部的第一个子类).在outer内部第一次出现inner之前，可能会出现任意数量的元素和嵌套级别，在那之后，inner可能会(重新)出现多次.下面是一个简化的HTML struct (我try 使用:nth-child()失败了:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Test</title>
    
        <style>
            .outer :nth-child(1 of .inner) {
                color:red;
            }
        </style>
    
    </head>
    <body>
    
    <div class="outer">
        <!-- Arbitrary number of elements may happen here -->
        <div>
            <!-- Arbitrary number of elements may happen here -->
            <div class="inner">
                <span>Should BE affected!</span>
            </div>
        </div>
        <!-- Arbitrary number of elements may happen here -->
        <div>
          <!-- Arbitrary number of elements may happen here -->
          <div>
            <!-- Arbitrary number of elements may happen here -->
            <div class="inner">
                <span>Should NOT be affected!</span>
            </div>
          </div>
        </div>
    </div>
    
    </body>
    </html>

在这个例子中，inner只出现两次，但它可以出现多次.

我无法控制生成的HTML，我所能做的就是将.outer类添加到外部div(inner类实际上是由我正在使用的控件呈现库添加的，我没有control--没有双关语的意思).

所以我需要定位这个"第一个"inner个元素，并忽略它的所有其他实例.我怎么才能做到这一点？

.outer { --color: black; color: var(--color); } /* we find .inner in EL */ .outer > *:has(.inner) .inner { color: red; } /* .inner children and subsequent-sibling */ .inner .inner, .inner ~ .inner { color: var(--color)!important; } /* EL's children which has .inner */ .outer > *:has(.inner) > *:has(.inner) .inner { color: var(--color); } /* EL's subsequent-sibling which has .inne */ .outer > *:has(.inner) ~ *:has(.inner) .inner { color: var(--color); }

<div class="outer">  <div>  <div class="inner"> <span>Should BE affected!</span> <div class="inner"> <span>Should NOT be affected</span> </div> </div> <div class="inner"> <span>Should NOT be affected</span> <div class="inner"> <span>Should NOT be affected</span> </div> </div> <div> <div class="inner"> <span>Should NOT be affected!</span> </div> <div class="inner"> <span>Should NOT be affected</span> </div> </div> </div>  <div> <div class="inner"> <span>Should NOT be affected!</span> </div>  <div>  <div class="inner"> <span>Should NOT be affected!</span> </div> </div> </div> </div>

Html 如何仅 Select 与子代CSS类匹配的第一个元素

推荐答案

Html相关问答推荐

我需要两个HTML标签，以便当另一个隐藏时，一个可见，反之亦然

后续使用收件箱从网页表中提取值

使用固定的HTML代码创建两个可向右滚动的行

传单自定义标记(divIcon)html/css不适用

如何将FlexBox项目zoom 到其包含图像的大小

Angular 滑块问题

损坏的可点击html邮箱签名

在css嵌套 Select 器中，尾随的`&；‘是什么意思？

将输入字段下方的两个按钮设置为两侧对齐

Angular /HTML5不会播放本地文件夹中的音频mpeg

创建带有弯曲边框的水平时间线

调整一组IMG的大小以适应容器DIV

jquery向单词中的一组字母添加跨度

为什么可滚动弹性项目需要 flex-basis： 0 ？

如何从 div 内的图像中删除填充而不从其他所有内容中删除填充？

是否可以为长 huxtable 固定头部？

CSS Padding 将右对齐的对象推离页面

如何使列表的第一个元素比 css 中的其他元素大？

如何向上移动图像并溢出图像的一部分而另一部分不溢出

使用 CSS 的发光边框动画没有流畅的过渡