选择与文本内联的元素
选择与文本内联的元素
提问于 2021-07-03 09:47:24
例如，我希望选择父元素内部的元素，该元素由文本(而不是非文本元素)舍入：
<div>
Lorem Ipsum
<img src="..."><!-- <<< Select this-->
dolor sit amet
</div>
<div>
<img src=""><!-- <<< not this-->
</div>我的基本想法是使单个表情符号更大，并将表情符号设置为1rem (在聊天应用程序中，如WhatsApp、信号、不和谐等)。)。
我用的是Twemoji，所以表情符号被翻译成图像
:only-child() 不会为我工作，因为文本不算额外的子
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-07-03 10:55:40
如果不更改标记或使用JavaScript，这似乎是不可能的。我发现许多问题和你自己的问题相匹配，没有一个问题有解决办法。
Is there a CSS selector for the first child, taking text nodes into account?
Only child in CSS with a text sibling
CSS selector for only child, including text
CSS: first-child selector including text nodes
Stack Overflow用户
发布于 2021-07-03 10:49:24
有很多可能的方法。一个是将文本封装到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。
Stack Overflow用户
发布于 2021-07-03 10:00:18
您是否尝试过给div和img标记一个类或id。你可以做这样的事
.divclass > .imgclass{
//write css here
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68235077
复制相关文章
相似问题
腾讯云开发者
