我正在嘗試為<img>自己行上的元素獲取 CSS 選擇器，而不是內嵌<img>. 所以它應該匹配（示例1）：
<p><img src="..."></p>
但不是（示例 2）：
<p>Lorem <img src="..."> ipsum</p>
我試過了img:only-child——因為
這對于您的用例來說可能就足夠了 - 它的缺點是 img 在僅 img 的情況下具有右手邊距。這對您來說可能重要也可能無關緊要。從某種意義上說，這一切都在 ap 元素中，我懷疑它會沒問題，因為任何以下內容都將在換行符上。
* {
margin: 0;
padding: 0;
}
p::first-letter {
margin-left: 20px;
}
p {
margin-left: -20px;
}
p img {
margin: 0 20px;
}<p><img src="https://picsum.photos/id/1015/100/100"></p>
<p>More than one word of text <img src="https://picsum.photos/id/1015/100/100">
</ "> and some more text</p>uj5u.com熱心網友回復：
我認為 CSS 解決方案很好。尤其是@AHaworth，因為它還會考慮文本中單詞較多的情況。這很可能是這種情況。因此也豎起大拇指！
為了完整起見，我在這里添加了一個 Javascript 解決方案。
w = document.querySelectorAll('.wrapper')
w.forEach((el) => {
if (el.childNodes.length > 1) {
el.childNodes.forEach((e) => {
if( e.length === undefined) {
e.classList.add('addMargin')
}
})
}
}).addMargin {
margin-left:20px;
margin-right:20px;
}<p class="wrapper"><img src="https://picsum.photos/id/237/100/100"></p>
<p class="wrapper">Lorem <img src="https://picsum.photos/id/237/100/100"> ipsum bla</p>
<p class="wrapper">Lorem ipsum <img src="https://picsum.photos/id/237/100/100"> ipsum bla </p>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358478.html