css - 所有 HTML 树的第一个元素的 CSS 属性

Question

我有以下html

<div class="text">
    <p>
        <img ...> //properties are needed only for this
    </p>
    <img ...>
    <figure>
        <img ...>
    </figure>
    <p>
        <img ...>
    </p>
    <p>
        <figure>
            <img ...>
        </figure>
    </p>
</div>

div.text img:first-of-type {
    border: 5px solid red;
}

<div class="text">
    <p>
        <img src="https://dummyimage.com/150x150/aaa/fff">
    </p>
    <img src="https://dummyimage.com/150x150/aaa/fff">
    <figure>
        <img src="https://dummyimage.com/150x150/aaa/fff">
    </figure>
    <p>
        <img src="https://dummyimage.com/150x150/aaa/fff">
    </p>
    <p>
        <figure>
            <img src="https://dummyimage.com/150x150/aaa/fff">
        </figure>
    </p>
</div>

第一个 img 可能是div的子级或包裹在p , figure 中。

如何在div.text的所有树中为第一个img添加 CSS 属性？

标签： cssimagecss-selectors