Javascript CSS规则取决于内容

我正在使用标记解析器解析标记内容。它将每一行显示为段落标记

因此，如果有图像标记，它将显示为

<p><img src="url" /></p>

如果它只包含文本，它将显示为

<p>Sometext</p>

Sometext

我想要的是，包含img标记的段落标记的左边距为0，而仅包含文本的段落标记的左边距为x值

---

这是否可能只使用css？或者我也必须使用javascript吗？

目前CSS不支持父选择器。但您可以指定p标记中包含的图像留有填充，如：

p > img { padding-left:1rem;}

---

使用CSS时，需要一个不存在的父选择器，所以需要脚本

使用

querySelectorAll

可以执行此操作

（函数（）{
addEventListener（“加载”，函数（）{
var p_with_img=document.queryselectoral（'p img'）；
对于（变量i=0；i
p{
左侧填充：30px；
边框：1px纯色灰色；
}
.p_与_img{
左侧填充：0；
}

Sometext
您不能仅使用CSS。在这个过程中，您必须使用javascript

规格：

JavaScript:

var images = document.querySelectorAll('p img');

for (var i = 0; i < images.length; i++) {
    var currentImage = images[i];
    currentImage.style.padding = '20px';
}

有了CSS，它将需要一个父选择器，而父选择器并不存在，所以您需要脚本，因为CSS基本上是与内容无关的（应该是这样的）。如果要执行此操作，请预解析HTML并附加可以根据其进行样式设置的类，例如，
。
标记不使用结束斜杠。@Rob这是错误的。这取决于HTML的变体。XHTML要求关闭标记。HTML5允许空元素，所以它不是必需的，但是。@Michael XHTML与HTML不同，他没有使用XHTML。如果您可以指向任何显示结束斜杠的
标记规范，我将收回我的语句，但我已经知道您不能这样做。我不会用JavaScript这样做。如果您知道内容将是什么，那么就没有理由在客户端动态地执行它。如果您的页面是静态的，那么可以预解析HTML；如果您的页面是动态创建的，那么可以在模板中添加一些逻辑（例如PHP）。@Michael我也不会，不过这里我只是告诉您什么可以是一个客户端，因为没有提到任何服务器端语言。
p {
    padding: 30px;
}