css 能否判断 <p> 里面是否有 <img> 或没有？

Question

假设

<div class="editor">
    <p>
        <img>
    </p>
</div>

<div class="editor">
    <p>
        文字...
    </p>
</div>

editor 宽度一开始必须要先设定宽度一百％
否则假设设定八十啪，即便可以抓到 <p> 里面的 <img> 设定为一百％
但我希望除了「非照片」以外（文字）的都会是在八十％的位置

.editor{
    width: 100%;
}
.editor p img{
    width: 100%;
}

文字也会跟着一百趴而不会是八十％
会出现以上情形是因为网上分享的ＨＴＭＬ编辑器他输出的格式都会是这样
名字为 summernote

Answer 1

.editor p :not(img) {
width: 80%:
}

Answer 2

CSS 没有这样的选择器，最好的处理方法是自行加上 class 选择器。

例如：

<p class="text-content">文字</p>
<p class="img-content"><img src="/hello.png"></p>

你提到 HTML 富文本编辑器输出结果就是那样，那你可以看看编辑器有没有 API 可以修改输出的 HTML 代码，如果没有，你的后续代码里肯定也会涉及到获取和保存编辑器的 HTML 代码，那么你在获取到之后加上 class 就好了。

Answer 3

文字用span包起来
.editor p img{width:100%}
.editor p span{width:80%}

Answer 4

不是很明白为什么给div设置width 100%,因为这本来就是它的默认表现。

Answer 5

css里面能判断便签存不存在，感觉好高深的赶脚，
想知道，你做的是什么项目，github有吗？观摩观摩下吧？