Select 元素与文本内联

Question

我想要 select 一个位于 parent 内的元素，被文本包围（而不是一个不是的元素），例如：

<div>
Lorem Ipsum
<img src="..."><!-- <<< Select this-->
dolor sit amet
</div>
<div>
<img src=""><!-- <<< not this-->
</div>

我的基本想法是让单个表情符号更大，并将与文本内联的表情符号设置为 1rem（在聊天应用程序中，如 WhatsApp、Signal、Discord...）。

我正在使用 Twemoji，因此表情符号会转换为图片

:only-child() 对我不起作用，因为文本不算作额外的 child

Answer 1

您是否尝试过为 div 和 img 标签提供 class 或 ID。你可以做类似

的事情

.divclass > .imgclass{
//write css here
}

Answer 2

有很多种可能的方法。一种是将文本包含在 span 或 p 标记中，如

<div>
    <p>
    Lorem Ipsum
        <img src="..."><!-- <<< Select this-->
    dolor sit amet
    </p>
</div>
<div>
    <img src=""><!-- <<< not this-->
</div>

然后使用 css 选择器 div > p > img。

另一种更简单的方法是使用类或 id 之类的

<div>
    Lorem Ipsum
        <img src="..." class="select-this-class"><!-- <<< Select this-->
    dolor sit amet
</div>
<div>
    <img src=""><!-- <<< not this-->
</div>

然后使用 css 选择器 .select-this-class

Answer 3

如果不更改标记或使用 JavaScript，这似乎是不可能的。我发现了很多符合你自己的问题，none 和解决方案。

Is there a CSS selector for the first child, taking text nodes into account?

CSS selector for only child, including text

CSS: first-child selector including text nodes

CSS element child vs child with text node

Select 元素与文本内联

Select element inline with text

html

css

text

image

css-selectors